plain-design 1.0.0-beta.3 → 1.0.0-beta.31

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "plain-design",
-  "version": "1.0.0-beta.3",
+  "version": "1.0.0-beta.31",
   "description": "",
   "main": "dist/plain-design.min.js",
   "module": "dist/plain-design.commonjs.min.js",
@@ -19,9 +19,9 @@
   "peerDependencies": {
     "exceljs": "^4.2.1",
     "file-saver": "^2.0.5",
-    "plain-design-composition": "^0.0.167",
-    "react": "^17.0.1",
-    "react-dom": "^17.0.1"
+    "plain-design-composition": "^0.0.177",
+    "react": "^18.0.1",
+    "react-dom": "^18.0.1"
   },
   "resolutions": {
     "@types/react": "18.2.4",
@@ -32,7 +32,7 @@
     "@types/react-transition-group": "^4.4.1",
     "color": "^4.2.3",
     "dayjs": "^1.10.4",
-    "plain-icons": "0.0.6",
+    "plain-icons": "0.0.7",
     "plain-utils": "^0.1.48",
     "react-flip-move": "^3.0.4",
     "react-transition-group": "^4.4.1"
@@ -68,7 +68,7 @@
     "fork-ts-checker-webpack-plugin": "^6.2.4",
     "mini-css-extract-plugin": "^1.4.1",
     "mockjs": "^1.1.0",
-    "plain-design-composition": "^0.0.167",
+    "plain-design-composition": "^0.0.180",
     "postcss": "^8.2.13",
     "postcss-loader": "^4.2.0",
     "qs": "^6.10.1",

package/src/packages/build.ts

@@ -1,15 +1,7 @@
 import Plain from './index';
-// @ts-ignore
-import allIcons from 'plain-icons/dist/icons.js';
+import {installAllIcon} from "./utils/installAllIcons";
 
-// @ts-ignore
-Plain.Icon.PlainIcon.use.options.props.getIcon.default = (icon: string) => {
-  const iconMeta = (allIcons as any)[icon];
-  if (!iconMeta) {
-    throw new Error(`getIcon: can't find icon match ${icon}`);
-  }
-  return iconMeta;
-};
+installAllIcon();
 
 export * from './index';
 export default Plain;

package/src/packages/components/Alert/alert.scss

@@ -125,7 +125,7 @@
   &.alert-theme-deep {
     @include statusMixin(alert) {
       background-color: $color-6;
-      color: white;
+      color: plv(pbfc);
       .alert-close {
         &:hover {
           background-color: $color-8;

package/src/packages/components/Application/theme/theme.ts

@@ -128,9 +128,7 @@ function createOtherVars(prefix: string | null, referenceVariable: (name: string
     'dialog-foot-padding': '8px 16px',
     'dialog-head-size': '48px',
     /*---------------------------------------message-------------------------------------------*/
-    'message-padding': '12px 20px',
     'message-box-shadow': '0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 6px 16px rgba(0, 0, 0, 0.08), 0 9px 28px 8px rgba(0, 0, 0, 0.05)',
-    'message-font-size': referenceVariable('font-size-normal'),
     /*---------------------------------------notice-------------------------------------------*/
     'notice-padding': '20px 24px',
     'notice-box-shadow': '0 3px 6px -4px rgba(0, 0, 0, .12), 0 6px 16px 0 rgba(0, 0, 0, .08), 0 9px 28px 8px rgba(0, 0, 0, .05)',
@@ -203,7 +201,7 @@ export function createThemeConfigurationData(prefix: string | null, config?: Dee
 
   const baseColorList: Record<tGenerateBaseColorList<iThemeBaseColors>, string> = (() => {
     const colors = {} as any;
-    Object.keys(BaseColors).forEach((colorName) => {
+    Object.keys(base).forEach((colorName) => {
       const baseColor = (base as any)[colorName];
       if (!baseColor) {return;}
       ThemeColorNum.forEach(i => {
@@ -232,6 +230,7 @@ export function createThemeConfigurationData(prefix: string | null, config?: Dee
       ...secondaryColorList,
       ...createGrayColors(dark, false),
       ...createGrayColors(dark, true),
+      ...base.primary === '#ffffff' ? { 'pbfc': 'black' } : { 'pbfc': 'white' },
       ...dark ? {
         'background-hover': '#3c3c4d',
         'scrollbar-color': '#141414',

package/src/packages/components/ArrowStepGroup/arrow-step.scss

@@ -32,7 +32,7 @@
       align-items: center;
       justify-content: center;
       padding: 0 16px;
-      color: white;
+      color: plv(pbfc);
     }
 
     .#{componentName(triangle)} {
@@ -73,7 +73,7 @@
     &.arrow-step-status-process, &.arrow-step-status-finish {
       .arrow-step-content {
         background-color: plv(primary-6);
-        color: white;
+        color: plv(pbfc);
       }
 
       .#{componentName(triangle)} {
@@ -84,7 +84,7 @@
     &.arrow-step-status-success {
       .arrow-step-content {
         background-color: plv(success-6);
-        color: white;
+        color: plv(pbfc);
       }
 
       .#{componentName(triangle)} {
@@ -95,7 +95,7 @@
     &.arrow-step-status-error {
       .arrow-step-content {
         background-color: plv(error-6);
-        color: white;
+        color: plv(pbfc);
       }
 
       .#{componentName(triangle)} {

package/src/packages/components/AutoTable/use/useTableOption.methods.tsx

@@ -161,6 +161,7 @@ export const useTableOptionMethods = AutoModule.createRegistration((
       }
     };
     const reload = async (reloadParam?: { size?: number }) => {
+      if (!state.isInit) {state.isInit = true;}
       await load({
         page: 1,
         size: reloadParam?.size,
@@ -488,6 +489,7 @@ export const useTableOptionMethods = AutoModule.createRegistration((
   })();
 
   hooks.onTableSetup.use(() => {
+    if (state.isInit) {return;}
     if (config.loadOnStart !== false) {pageMethods.reload();}
   });
 

package/src/packages/components/AutoTable/use/useTableOption.state.tsx

@@ -14,6 +14,7 @@ declare module '../utils/TableOption.space' {
 
 export const useTableOptionState = AutoModule.createRegistration(({ config, hooks }) => {
   const state: TableOptionSpace.iTableOptionState = reactive({
+    isInit: false,
     getTable: () => null,
     getAutoTable: () => null,
     list: [],

package/src/packages/components/AutoTable/utils/TableOption.space.tsx

@@ -118,6 +118,7 @@ export namespace TableOptionSpace {
    * @date    2023/2/7 9:47
    */
   export interface iTableOptionState {
+    isInit: boolean,
     getTable: () => null | iTableRefer,
     getAutoTable: () => null | iAutoTableRefer;
     list: PlainObject[],

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

@@ -18,7 +18,7 @@
     @include statusMixin(badge-content) {
       background-color: $color-6;
       border-radius: 100px;
-      color: white;
+      color: plv(pbfc);
     }
 
     &.badge-content-top {

package/src/packages/components/Button/button.scss

@@ -37,7 +37,7 @@
     @include statusMixin(button) {
       background-color: $color-6;
       border-color: $color-6;
-      color: white;
+      color: plv(pbfc);
       @include hover(button) {
         background-color: $color-4;
         border-color: $color-4;

package/src/packages/components/CarouselGroup/carousel.scss

@@ -40,7 +40,7 @@
       transition: background-color 300ms linear;
       cursor: pointer;
       pointer-events: auto;
-      background-color: rgba(#ffffff, 0.45);
+      background-color: rgba(#000000, 0.2);
       color: white;
       width: 36px;
       height: 36px;

package/src/packages/components/CascadePanel/list/CascadeListPanelItem.tsx

@@ -59,13 +59,13 @@ export const CascadeListPanelItem = designComponent({
               return (
                 <VirtualList data={props.treeNodes} size={CascadePanelVirtualSize[panel.styleComputed.value.size]} dynamicSize>
                   {{
-                    default: ({ item: treeNode, index, virtualIndex }: { item: iTreeNode, index: number, virtualIndex: number }) => (
+                    default: ({ item: treeNode, index, vIndex, vid }: { item: iTreeNode, index: number, vIndex: number, vid: string }) => (
                       <CascadeListPanelNode
-                        data-vid={index}
+                        data-vid={vid}
                         treeNode={treeNode}
                         treeNodes={props.treeNodes}
                         index={index}
-                        key={virtualIndex}
+                        key={vIndex}
                         handleClickNode={props.handleClickNode}
                         {...props.nodeAttrs}
                       >

package/src/packages/components/CheckboxInner/checkbox-inner.scss

@@ -14,7 +14,7 @@
 
     .checkbox-inner-check-polyline {
       fill: transparent;
-      stroke: white;
+      stroke: plv(pbfc);
       stroke-width: 10;
     }
   }

package/src/packages/components/ColorPicker/sub/ColorSlider.tsx

@@ -5,6 +5,7 @@ import {createEffects} from "plain-utils/utils/createEffects";
 import {disabledUserSelect} from "plain-utils/dom/disabledUserSelect";
 import {enableUserSelect} from "plain-utils/dom/enableUserSelect";
 import './color-slider.scss';
+import {ClientZoom} from "../../ClientZoom";
 
 export const ColorSlider = designComponent({
   name: 'color-slider',
@@ -110,12 +111,13 @@ export const ColorSlider = designComponent({
       };
       const handler = {
         onMousedown: (e: iMouseEvent) => {
-          utils.setOffsetX(e.nativeEvent.offsetX);
+          const { clientX, clientY, offsetX } = ClientZoom.getClientPosition(e);
+          utils.setOffsetX(offsetX);
           staticState = {
             start: {
-              x: e.clientX,
-              y: e.clientY,
-              offsetX: e.nativeEvent.offsetX,
+              x: clientX,
+              y: clientY,
+              offsetX: offsetX,
             }
           };
           draggierEffects.push(() => staticState = null);
@@ -129,7 +131,8 @@ export const ColorSlider = designComponent({
         },
         onMousemove: (e: MouseEvent) => {
           if (!staticState) {return;}
-          const durX = e.clientX - staticState.start.x;
+          const { clientX } = ClientZoom.getClientPosition(e);
+          const durX = clientX - staticState.start.x;
           const newOffsetX = durX + staticState.start.offsetX;
           utils.setOffsetX(newOffsetX);
         },

package/src/packages/components/ColorPicker/sub/ColorSvPanel.tsx

@@ -5,6 +5,7 @@ import {disabledUserSelect} from "plain-utils/dom/disabledUserSelect";
 import {enableUserSelect} from "plain-utils/dom/enableUserSelect";
 import {getRgbColor} from "../../../utils/color.utils";
 import Color from 'color';
+import {ClientZoom} from "../../..";
 
 export const ColorSvPanel = designComponent({
   name: 'color-sv-panel',
@@ -71,14 +72,16 @@ export const ColorSvPanel = designComponent({
         document.body.addEventListener('mousemove', handler.mousemove);
         document.body.addEventListener('mouseup', handler.mouseup);
         disabledUserSelect();
-        methods.updatePosition(e.nativeEvent.offsetX, e.nativeEvent.offsetY);
-        state.startX = e.clientX;
-        state.startY = e.clientY;
+        const { offsetX, offsetY, clientX, clientY } = ClientZoom.getClientPosition(e);
+        methods.updatePosition(offsetX, offsetY);
+        state.startX = clientX;
+        state.startY = clientY;
         state.tempSaturation = state.saturation as number;
         state.tempValue = state.val as number;
       },
       mousemove: (e: MouseEvent) => {
-        methods.updatePosition(e.clientX - state.startX, e.clientY - state.startY, false);
+        const { clientX, clientY } = ClientZoom.getClientPosition(e);
+        methods.updatePosition(clientX - state.startX, clientY - state.startY, false);
       },
       mouseup: () => {
         document.body.removeEventListener('mousemove', handler.mousemove);

package/src/packages/components/DatePicker/date.scss

@@ -141,7 +141,7 @@ $width: 276px;
 
           & > span {
             background-color: plv(primary-6);
-            color: white;
+            color: plv(pbfc);
           }
         }
       }

package/src/packages/components/Dialog/dialog.scss

@@ -138,7 +138,7 @@
 
           &:hover {
             @include prefix(icon) {
-              color: white;
+              color: plv(pbfc);
             }
 
             &:after {

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

@@ -42,6 +42,7 @@ export const Dialog = designComponent({
 
     noContentPadding: { type: Boolean },                                                    // 去掉内容默认内边距
     noHead: { type: Boolean, },                                                             // 去掉默认弹框标题
+    noFoot: { type: Boolean },                                                              // 去掉底部内容
     noMask: { type: Boolean },                                                              // 去掉遮罩
     noClose: { type: Boolean },                                                             // 去掉关闭按钮
 
@@ -253,9 +254,9 @@ export const Dialog = designComponent({
         showing.start();
         if (!state.init) {
           state.init = true;
-          await delay();
+          await delay(23);
           if (!refs.content) {
-            await delay();
+            await delay(23);
           }
         } else {
           await nextTick();
@@ -417,7 +418,7 @@ export const Dialog = designComponent({
                 <div className="dialog-body">
                   {slots.default()}
                 </div>
-                {(!!props.confirmButton || !!props.cancelButton || slots.foot.isExist()) && (
+                {!props.noFoot && (!!props.confirmButton || !!props.cancelButton || slots.foot.isExist()) && (
                   <div className="dialog-foot">
                     {slots.foot()}
                     {(() => {

package/src/packages/components/Dialog/useDialogMovable.tsx

@@ -1,4 +1,5 @@
 import {watchEffect} from "plain-design-composition";
+import {ClientZoom} from "../..";
 
 export function useDialogMovable({ refs, movable }: { refs: { head: HTMLElement | undefined | null, content: HTMLElement | undefined | null }, movable: { value: boolean } }) {
 
@@ -20,9 +21,10 @@ export function useDialogMovable({ refs, movable }: { refs: { head: HTMLElement
 
   const handler = {
     mousedown: (e: MouseEvent) => {
+      const { clientX, clientY } = ClientZoom.getClientPosition(e);
       staticState.start = {
-        x: e.clientX,
-        y: e.clientY,
+        x: clientX,
+        y: clientY,
         left: staticState.move.left,
         top: staticState.move.top,
       };
@@ -30,8 +32,9 @@ export function useDialogMovable({ refs, movable }: { refs: { head: HTMLElement
       document.documentElement.addEventListener('mouseup', handler.mouseup);
     },
     mousemove: (e: MouseEvent) => {
-      staticState.move.x = e.clientX;
-      staticState.move.y = e.clientY;
+      const { clientX, clientY } = ClientZoom.getClientPosition(e);
+      staticState.move.x = clientX;
+      staticState.move.y = clientY;
 
       const durX = staticState.move.x - staticState.start.x;
       const durY = staticState.move.y - staticState.start.y;

package/src/packages/components/Dialog/utils/dialog.mouse.ts

@@ -1,12 +1,14 @@
 import {isSSR} from "../../../utils/isSSR";
+import {ClientZoom} from "../../..";
 
 export const DialogMouse = (() => {
   const state = { x: 0, y: 0 };
 
   if (!isSSR()) {
     document.documentElement.addEventListener('mousedown', e => {
-      state.x = e.clientX;
-      state.y = e.clientY;
+      const { clientX, clientY } = ClientZoom.getClientPosition(e);
+      state.x = clientX;
+      state.y = clientY;
     }, true);
   }
 

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

@@ -1,4 +1,4 @@
-import {computed, designComponent, PropType} from "plain-design-composition";
+import {computed, designComponent, iMouseEvent, PropType} from "plain-design-composition";
 import {DropdownContextProvider, DropdownOptionContextProvider, DropdownOptionTrigger, iDropdownOptionContext, renderDropdownOption} from "../Dropdown/dropdown.utils";
 import Icon from "../Icon";
 import {createCounter} from "plain-utils/utils/createCounter";
@@ -18,7 +18,7 @@ export const DropdownOption = designComponent({
   },
   slots: ['default', 'content'],
   emits: {
-    onClick: (e: MouseEvent) => true,
+    onClick: (e: iMouseEvent) => true,
   },
   setup({ props, event: { emit }, slots }) {
 
@@ -38,7 +38,7 @@ export const DropdownOption = designComponent({
     };
 
     const handler = {
-      onClick: (e: MouseEvent) => {
+      onClick: (e: iMouseEvent) => {
         if (props.disabled || props.readonly) {return;}
         emit.onClick(e);
         dropdown.handler.onClickOption(dropdownOptionContext);

package/src/packages/components/Image/image.scss

@@ -6,7 +6,7 @@
   right: 0;
   bottom: 0;
   background-color: rgba(black, 0.85);
-  color: white;
+  color: plv(pbfc);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -213,7 +213,7 @@
   &.image-uploader-status-fail {
     .image-uploader-fail {
       background-color: rgba(black, 0.85);
-      color: white;
+      color: plv(pbfc);
     }
   }
 
@@ -247,7 +247,7 @@
       }
 
       .#{componentName(icon)} {
-        color: white;
+        color: plv(pbfc);
       }
     }
   }

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

@@ -6,6 +6,7 @@ import {getKey, KEY} from "../KeyboardService";
 import {delay} from "plain-utils/utils/delay";
 import {createEffectiveHandler} from "../../utils/createEffectiveHandler";
 import {createEffects} from "plain-utils/utils/createEffects";
+import {ClientZoom} from "../..";
 
 /**
  * 渲染多值输入框
@@ -140,9 +141,10 @@ function useDragHorizontalScroll(getEl: () => HTMLElement | null | undefined) {
 
   const handler = {
     mousedown: (e: MouseEvent) => {
+      const { clientX } = ClientZoom.getClientPosition(e);
       staticState.isDragging = false;
       staticState.start = {
-        x: e.clientX,
+        x: clientX,
         left: staticState.el!.scrollLeft,
         width: staticState.el!.scrollWidth,
       };
@@ -150,7 +152,8 @@ function useDragHorizontalScroll(getEl: () => HTMLElement | null | undefined) {
       document.documentElement.addEventListener('mouseup', handler.mouseup, true);
     },
     mousemove: (e: MouseEvent) => {
-      staticState.move.x = e.clientX;
+      const { clientX } = ClientZoom.getClientPosition(e);
+      staticState.move.x = clientX;
       const durX = staticState.move.x - staticState.start.x;
       if (!staticState.isDragging) {
         if (Math.abs(durX) > 5) {

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

@@ -1,7 +1,10 @@
 import {iInputCompositionData} from "./input.utils";
-import {iKeyboardEvent, reactive, useClasses, useStyles} from "plain-design-composition";
+import {fixInputCursor, iKeyboardEvent, reactive, useClasses, useStyles} from "plain-design-composition";
 import {unit} from "plain-utils/string/unit";
 import {createEffects} from "plain-utils/utils/createEffects";
+import {ClientZoom} from "../ClientZoom";
+
+const _Textarea = fixInputCursor('textarea')
 
 export function useTextareaInput(data: iInputCompositionData) {
 
@@ -61,7 +64,7 @@ export function useTextareaInput(data: iInputCompositionData) {
         ))}
         {!model.value && <>&nbsp;</>}
       </span>
-      <textarea
+      <_Textarea
         ref={handler.onRef}
         value={model.value}
         onInput={handler.onInput}
@@ -95,8 +98,10 @@ function useTextareaResize({ hooks, onResize }: iInputCompositionData & { onResi
   const handler = {
     textarea: null as null | HTMLInputElement,
     mousedown: (e: MouseEvent) => {
-      const { offsetX, offsetY, clientY, target: { offsetWidth, offsetHeight } } = e as any;
-      if (!(offsetWidth - offsetX < 12 && offsetHeight - offsetY < 12)) {
+      const { offsetX, offsetY, clientY } = ClientZoom.getClientPosition(e);
+      let { offsetWidth, offsetHeight } = e.target as any;
+      const dragSize = 12
+      if (!(offsetWidth - offsetX < dragSize && offsetHeight - offsetY < dragSize)) {
         return;
       }
       staticState.isDragging = false;
@@ -108,7 +113,7 @@ function useTextareaResize({ hooks, onResize }: iInputCompositionData & { onResi
       document.documentElement.addEventListener('mouseup', handler.mouseup);
     },
     mousemove: (e: MouseEvent) => {
-      const { clientY } = e;
+      const { clientY } = ClientZoom.getClientPosition(e);
       staticState.move = { y: clientY };
       const durY = staticState.move.y - staticState.start.y;
       if (!staticState.isDragging) {

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

@@ -3,18 +3,18 @@ import {iSelectOptionProps} from "../../Select/select.utils";
 
 export function useInputHooks() {
   return {
-    onRenderDefault: createSyncHooks<(content: RenderNode) => void>(),              // 渲染默认插槽
-    onRenderSuffix: createSyncHooks<(content: RenderNode) => void>(),               // 渲染suffix插槽
-    onRefInput: createHooks<(el: HTMLInputElement | null) => void>(),               // input dom对象引用
-    onRefWrapper: createHooks<(el: HTMLElement | null) => void>(),                  // 容器节点dom对象引用
-    onInputKeydown: createHooks<(e: iKeyboardEvent) => void>(),                   // input触发按键事件
-    onInput: createHooks<(val: any) => void>(),                                     // input的输入动作
-    onClasses: createSyncHooks<(val: any[]) => void>(),                             // 计算根节点classes
+    onRenderDefault: createSyncHooks<(content: RenderNode) => void>(true),              // 渲染默认插槽
+    onRenderSuffix: createSyncHooks<(content: RenderNode) => void>(true),               // 渲染suffix插槽
+    onRefInput: createHooks<(el: HTMLInputElement | null) => void>(),                   // input dom对象引用
+    onRefWrapper: createHooks<(el: HTMLElement | null) => void>(),                      // 容器节点dom对象引用
+    onInputKeydown: createHooks<(e: iKeyboardEvent) => void>(),                         // input触发按键事件
+    onInput: createHooks<(val: any) => void>(),                                         // input的输入动作
+    onClasses: createSyncHooks<(val: any[]) => void>(true),                             // 计算根节点classes
     onSuggestion: createHooks<(data: { val: string, optionProps: iSelectOptionProps }) => void>(),// 点击了某个推荐选项
-    onTagChange: createHooks<() => void>(),                                         // 多值输入的时候的变化动作
-    onTriggerOpenSuggestion: createHooks<() => void>(),                             // 触发打开suggestion的动作
-    onTriggerCloseSuggestion: createHooks<() => void>(),                            // 触发打开suggestion的动作
-    onGetSuggestionIsShow: createSyncHooks<(flag: boolean) => void>(),              // suggestion 面板是否已经打开
+    onTagChange: createHooks<() => void>(),                                             // 多值输入的时候的变化动作
+    onTriggerOpenSuggestion: createHooks<() => void>(),                                 // 触发打开suggestion的动作
+    onTriggerCloseSuggestion: createHooks<() => void>(),                                // 触发打开suggestion的动作
+    onGetSuggestionIsShow: createSyncHooks<(flag: boolean) => void>(true),              // suggestion 面板是否已经打开
   };
 }
 

package/src/packages/components/InputNumber/NumberResize.tsx

@@ -2,6 +2,8 @@ import {designComponent, getComponentCls, iHTMLDivElement, iMouseEvent, useRefs}
 import {Icon} from "../Icon";
 import {createEffects} from "plain-utils/utils/createEffects";
 import {addClass} from "plain-utils/dom/addClass";
+import {ClientZoom} from "../ClientZoom";
+import {roundFixed} from "plain-utils/utils/roundFixed";
 
 export const NumberResize = designComponent({
   name: "number-resize",
@@ -9,6 +11,9 @@ export const NumberResize = designComponent({
   props: {
     step: { type: Number, default: 1 },
     value: { type: Number },
+    precision: { type: Number },
+    max: { type: Number },
+    min: { type: Number }
   },
   emits: {
     onChange: (val: number) => true,
@@ -35,6 +40,8 @@ export const NumberResize = designComponent({
 
       const handler = {
         onMousedown: (e: iMouseEvent) => {
+          const { clientY } = ClientZoom.getClientPosition(e);
+
           event.emit.onMouseDown(e);
           const el = refs.el!.cloneNode(true) as HTMLDivElement;
           const { top, left, height, width } = refs.el!.getBoundingClientRect();
@@ -50,7 +57,7 @@ export const NumberResize = designComponent({
           addClass(el, 'number-resize-dragging');
 
           staticState = {
-            startY: e.clientY,
+            startY: clientY,
             startValue: props.value == null ? 0 : props.value,
             el,
             startTop: top,
@@ -71,10 +78,20 @@ export const NumberResize = designComponent({
         },
         onMousemove: (e: MouseEvent) => {
           if (!staticState) {return;}
-          const durY = (e.clientY - staticState.startY);
+          const { clientY } = ClientZoom.getClientPosition(e);
+          const durY = (clientY - staticState.startY);
           const elMoveTop = staticState.startTop + durY;
           staticState.el.style.transform = `translate3d(${staticState.startLeft}px,${elMoveTop}px,0)`;
-          const newValue = Math.ceil(staticState.startValue + (durY * -1) / unit) * props.step;
+          let newValue = Math.ceil(staticState.startValue + (durY * -1) / unit) * props.step;
+          if (props.precision != null) {
+            newValue = roundFixed(newValue, props.precision)!;
+          }
+          if (props.max != null && newValue > props.max) {
+            newValue = props.max;
+          }
+          if (props.min != null && newValue < props.min) {
+            newValue = props.min;
+          }
           event.emit.onChange(newValue);
           // console.log(newValue);
         },

package/src/packages/components/InputNumber/input-number.utils.tsx

@@ -12,13 +12,15 @@ export const InputNumberPropsOption = {
   min: { type: [String, Number] },                              // 最小值
   max: { type: [String, Number] },                              // 最大值
   step: { type: [String, Number], default: 1 },                 // 计数器步长
-  stepStrictly: { type: Boolean },                                    // 是否只能输入 step 的倍数
+  stepStrictly: { type: Boolean },                              // 是否只能输入 step 的倍数
   precision: { type: [Number, String] },                        // 数值精度
   button: { type: [String, Boolean] as PropType<boolean | typeof NumberButtonTypes.TYPE | null>, default: NumberButtonTypes.right },// 按钮模式 false, 'none','button','right'
-  availableUnits: { type: Array as PropType<string[]> },              // 允许输入的数字单位
-  defaultUnit: { type: String },                                      // 默认的数字单位，当没有值的时候点击加减号默认给的单位
-  addIcon: { type: String },                                          // add按钮图标
-  subIcon: { type: String },                                          // sub按钮图标
+  availableUnits: { type: Array as PropType<string[]> },        // 允许输入的数字单位
+  defaultUnit: { type: String },                                // 默认的数字单位，当没有值的时候点击加减号默认给的单位
+  addIcon: { type: String },                                    // add按钮图标
+  subIcon: { type: String },                                    // sub按钮图标
+  requireUnit: { type: Boolean },                               // 输入的值必须带单位，否则视为无效输入(不会触发change，并且失焦之后恢复上一次有效值)
+  isValueEffective: { type: Function as PropType<(val: string | number, unit?: string | null) => boolean> }, // 判断值是否有效，否则视为无效输入
 
   /*---------------------------------------input-------------------------------------------*/
   inputAttrs: { type: Object },                                       // input属性配置对象