@gm-mobile/c-react 3.9.3-ebta.7 → 3.9.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gm-mobile/c-react",
-  "version": "3.9.3-ebta.7",
+  "version": "3.9.3",
   "description": "> TODO: description",
   "author": "liyatang <liyatang@qq.com>",
   "homepage": "https://github.com/gmfe/gm-mobile#readme",
@@ -21,9 +21,9 @@
     "url": "https://github.com/gmfe/gm-mobile/issues"
   },
   "dependencies": {
-    "@gm-mobile/c-font": "^3.9.3-ebta.7",
-    "@gm-mobile/c-tool": "^3.9.3-ebta.7",
-    "@gm-mobile/locales": "^3.9.3-ebta.7"
+    "@gm-mobile/c-font": "^3.9.3",
+    "@gm-mobile/c-tool": "^3.9.3",
+    "@gm-mobile/locales": "^3.9.3"
   },
   "peerDependencies": {
     "@tarojs/components": "3.0.18",
@@ -33,5 +33,5 @@
     "prop-types": "^15.7.2",
     "react": "^16.13.1"
   },
-  "gitHead": "d43ad86d4e6ba88d96a4b7a1a9cb8d5511579ad3"
+  "gitHead": "1f1d2b656046efe6479f05f9fde2e34cb99df4de"
 }

package/src/component/button/button.tsx

@@ -73,7 +73,7 @@ export const Button: FC<ButtonProps> = ({
       onClick={handleClick}
     >
       {loadFlag && <Loading className='m-btn-loading' />}
-      <Flex alignCenter justifyCenter>
+      <Flex alignCenter justifyCenter style={{ display: 'inline-flex' }}>
         {children}
       </Flex>
     </BaseButton>

package/src/component/calendar/index.ts

@@ -5,5 +5,6 @@ export { default as MultipleCalendar } from './multiple_calendar'
 export type {
   BaseCalendarProps,
   RangeCalendarProps,
+  CalendarProps,
   MultipleCalendarProps,
 } from './types'

package/src/component/cell/cell.tsx

@@ -19,35 +19,37 @@ export const Cell: FC<CellProps> = ({
   ...rest
 }) => {
   return (
-    <Flex
-      {...rest}
-      alignCenter
-      className={classNames(
-        'm-cell',
-        {
-          'm-cell-access': access,
-          'm-cell-with-icon': icon,
-          'm-cell-no-active': noActive,
-        },
-        className
-      )}
-      onClick={onClick}
-    >
-      {icon && <View className='m-cell-icon'>{icon}</View>}
-      {left && <View className='m-cell-left'>{left}</View>}
-      <View className='m-cell-body'>{children}</View>
-      <Flex alignCenter>
-        {right &&
-          (_.isString(right) ? (
-            <View className='m-cell-right'>{right}</View>
-          ) : (
-            right
-          ))}
-        {access && (
-          <Text className='m-font m-font-angle-right m-cell-access-icon' />
+    <>
+      <Flex
+        {...rest}
+        alignCenter
+        className={classNames(
+          'm-cell',
+          {
+            'm-cell-access': access,
+            'm-cell-with-icon': icon,
+            'm-cell-no-active': noActive,
+          },
+          className
         )}
+        onClick={onClick}
+      >
+        {icon && <View className='m-cell-icon'>{icon}</View>}
+        {left && <View className='m-cell-left'>{left}</View>}
+        <View className='m-cell-body'>{children}</View>
+        <Flex alignCenter>
+          {right &&
+            (_.isString(right) ? (
+              <View className='m-cell-right'>{right}</View>
+            ) : (
+              right
+            ))}
+          {access && (
+            <Text className='m-font m-font-angle-right m-cell-access-icon' />
+          )}
+        </Flex>
       </Flex>
-    </Flex>
+    </>
   )
 }
 

package/src/component/cell/style.less

@@ -30,7 +30,6 @@
       background: var(--m-color-bg-white);
     }
   }
-  .mCellBorderBottomAfter(15px, 0);
 
   &.m-cell-access {
     cursor: pointer;
@@ -41,10 +40,6 @@
     }
   }
 
-  &.m-cell-with-icon {
-    .mCellBorderBottomAfter(50px, 0);
-  }
-
   .m-cell-icon {
     width: 35px;
   }
@@ -105,4 +100,12 @@
   .m-cell:not(.m-cell-form):last-child::after {
     display: none;
   }
+  
+  .m-cell {
+    .mCellBorderBottomAfter(15px, 0);
+
+    &.m-cell-with-icon {
+      .mCellBorderBottomAfter(50px, 0);
+    }
+  }
 }

package/src/component/custom_tabbar/custom_tabbar.weapp.tsx

@@ -24,7 +24,12 @@ const CustomTabbar = () => {
     return null
   }
 
-  return <View style={{ height: `${height}px` }} />
+  return (
+    <View
+      className='custom-tabbar-placeholder'
+      style={{ height: `${height}px` }}
+    />
+  )
 }
 
 CustomTabbar.getCustomTabbarHeight = getCustomTabbarHeight

package/src/component/dialog/common/base.less

@@ -0,0 +1,3 @@
+.m-customer-dialog-header{
+  background-color: var(--m-color-bg-back);
+}

package/src/component/dialog/common/base.tsx

@@ -1,6 +1,7 @@
 import React, { ReactNode } from 'react'
 import { Flex, Popup, View, Button } from '../../..'
 import { noop } from 'lodash'
+import './base.less'
 
 interface Option<T> {
   title: ReactNode
@@ -54,7 +55,11 @@ export function showDialog<T>({
     const Template = () => {
       return (
         <Flex column className='m-border-radius m-overflow-hidden m-bg-white'>
-          <Flex justifyBetween alignCenter className='m-padding-10 m-bg-back'>
+          <Flex
+            justifyBetween
+            alignCenter
+            className='m-customer-dialog-header m-padding-10'
+          >
             <Flex flex>{left}</Flex>
             <Flex
               flex
@@ -68,7 +73,6 @@ export function showDialog<T>({
                 <Button
                   mini
                   plain
-                  noRound
                   type='link'
                   className='m-text-desc m-margin-lr-0'
                   onClick={cancel}
@@ -81,7 +85,7 @@ export function showDialog<T>({
           {children}
           {bottom || (
             <Flex className='m-padding-lr-10'>
-              <Button block noRound type='primary' onClick={() => ok()}>
+              <Button block type='primary' onClick={() => ok()}>
                 {okText}
               </Button>
             </Flex>
@@ -94,7 +98,7 @@ export function showDialog<T>({
       disabledHeader: true,
       [direction]: true,
       disabledAnimate: false,
-      onHide: Popup.hide,
+      onHide: cancel,
       children: <Template />,
     })
   })

package/src/component/dialog/common/choose.tsx

@@ -24,6 +24,7 @@ export interface ChooseProps {
   /** 搜索功能 */
   // search?: boolean
   maxHeight?: string
+  onCancel?: () => void
 }
 
 /** 底部弹出的选择界面 */
@@ -34,6 +35,7 @@ export default function ({
   multiSelect = false,
   defaultSelected = [],
   maxHeight = '50vh',
+  onCancel,
 }: ChooseProps) {
   if (multiSelect) needConfirm = true
   const selected = [...defaultSelected] as Item[]
@@ -93,6 +95,7 @@ export default function ({
     title,
     children: <Children />,
     onOk: () => selected,
+    onCancel: onCancel,
     bottom: needConfirm ? undefined : <View />,
   })
   return promise

package/src/component/dialog/dialog.tsx

@@ -44,6 +44,11 @@ const ErrorInput: FC<ErrorInputProps> = ({
 
 const DialogStatics: DialogStaticsTypes<string | RenderOptions> = {
   render(options, type) {
+    const autoHide = !(
+      typeof options === 'object' &&
+      options.onConfirm &&
+      typeof options.children === 'object'
+    )
     if (typeof options === 'string') {
       options = {
         children: options as string,
@@ -92,7 +97,7 @@ const DialogStatics: DialogStaticsTypes<string | RenderOptions> = {
         }
 
         Promise.resolve(result).then(() => {
-          DialogStatics.hide()
+          if (autoHide) DialogStatics.hide()
 
           return setTimeout(() => {
             resolve(type === 'prompt' ? inputValue : undefined)

package/src/component/digital_keyboard/index.tsx

@@ -30,6 +30,7 @@ export type DigitalKeyboardProps = Omit<KeyboardProps, 'value' | 'int'> & {
   min?: number
   /** 最大值 */
   max?: number
+  withUseRef?: boolean
 }
 
 export class DigitalKeyboard {
@@ -45,6 +46,7 @@ export class DigitalKeyboard {
     min,
     max,
     style,
+    withUseRef = true,
     ...rest
   }: DigitalKeyboardProps) {
     this.form = form
@@ -100,7 +102,12 @@ export class DigitalKeyboard {
 
               if (btn.type === 'digit' && value && !value.endsWith('.')) {
                 const num = parseFloat(value)
-                if (!isNaN(num as number)) {
+                if (value.endsWith('.0')) {
+                  // 处理特殊情况
+                  if (fractionDigits === 0) {
+                    value = value.replace(/\.0$/, '')
+                  }
+                } else if (!isNaN(num as number)) {
                   value = clamp(
                     num,
                     min === undefined ? num : min,
@@ -136,7 +143,7 @@ export class DigitalKeyboard {
       setInt: true,
     })
     // eslint-disable-next-line react-hooks/rules-of-hooks
-    return useRef(this).current
+    return withUseRef ? useRef(this).current : this
   }
 
   active: string

package/src/component/digital_keyboard/stories.tsx

@@ -58,7 +58,7 @@ const Template: Story<DigitalKeyboardProps> = (args) => {
 export const Usage = Template.bind({})
 Usage.argTypes = {
   form: {
-    description: '`Object` 表单的字段键值对',
+    description: '`Object` 表单的字段键值对，可以通过.set增改，通过.get读取',
     type: {
       required: true,
     },

package/src/component/error/error.tsx

@@ -0,0 +1,23 @@
+import React, { FC } from 'react'
+import classNames from 'classnames'
+import _ from 'lodash'
+import { View } from '../view'
+import { ErrorProps } from './types'
+import { Text } from '../text'
+
+export const Error: FC<ErrorProps> = ({ className, topLine, children }) => {
+  return children ? (
+    <View
+      className={classNames('error', className, {
+        'm-border-1px-top-before': topLine,
+        'has-error': !!children,
+      })}
+    >
+      <View className='error-message'>{children}</View>
+    </View>
+  ) : (
+    <></>
+  )
+}
+
+export default Error

package/src/component/error/index.ts

@@ -0,0 +1 @@
+export { default as Error } from './error'

package/src/component/error/style.less

@@ -0,0 +1,42 @@
+.error {
+  @red: fade(red, 50);
+  color: @red;
+  font-size: 10px;
+  width: 100%;
+  padding: 5px 0;
+  &.m-border-1px-top-before::before {
+    border-color: @red;
+  }
+  .error-message {
+    display: inline-block;
+    animation-name: headShake;
+    animation-timing-function: ease;
+    animation-duration: 0.75s;
+  }
+}
+
+@keyframes headShake {
+  0% {
+    transform: translateX(0);
+  }
+
+  6.5% {
+    transform: translateX(-6px) rotateY(-9deg);
+  }
+
+  18.5% {
+    transform: translateX(5px) rotateY(7deg);
+  }
+
+  31.5% {
+    transform: translateX(-3px) rotateY(-5deg);
+  }
+
+  43.5% {
+    transform: translateX(2px) rotateY(3deg);
+  }
+
+  50% {
+    transform: translateX(0);
+  }
+}

package/src/component/error/types.ts

@@ -0,0 +1,5 @@
+import { HTMLAttributes } from 'react'
+
+export interface ErrorProps extends HTMLAttributes<HTMLDivElement> {
+  topLine?: boolean
+}

package/src/component/layout_root/layout_root.tsx

@@ -1,4 +1,10 @@
-import React, { FC, useState, ReactNode, useEffect } from 'react'
+import React, {
+  FC,
+  useState,
+  ReactNode,
+  useEffect,
+  HTMLAttributes,
+} from 'react'
 import _ from 'lodash'
 import { is } from '@gm-mobile/c-tool'
 
@@ -13,7 +19,10 @@ import {
 
 const cbMap: CBMapType = {}
 
-const LayoutRoot: FC & LayoutRootStatic = () => {
+const LayoutRoot: FC<HTMLAttributes<HTMLDivElement>> & LayoutRootStatic = ({
+  style,
+  ...rest
+}) => {
   const [state, setState] = useState<LayoutRootState>({})
   const path: string = getPath()
 
@@ -31,7 +40,15 @@ const LayoutRoot: FC & LayoutRootStatic = () => {
 
   // 有层级关系
   return (
-    <View>
+    <View
+      style={{
+        ...style,
+        display: Object.keys(state).find((k) => !!state[k as 'popup'])
+          ? 'block'
+          : 'none',
+      }}
+      {...rest}
+    >
       {state.innerLayer}
       {state.popup}
       {state.picker}

package/src/component/layout_root/layout_root_v1.tsx

@@ -1,4 +1,10 @@
-import React, { FC, useState, ReactNode, useEffect } from 'react'
+import React, {
+  FC,
+  useState,
+  ReactNode,
+  useEffect,
+  HTMLAttributes,
+} from 'react'
 import _ from 'lodash'
 import { is } from '@gm-mobile/c-tool'
 
@@ -16,7 +22,10 @@ const cbMap: CBMapV1Type = {}
 /**
  * @description: 目前仅用于Popup的多层弹窗
  */
-const LayoutRootV1: FC & LayoutV1RootStatic = () => {
+const LayoutRootV1: FC<HTMLAttributes<HTMLDivElement>> & LayoutV1RootStatic = ({
+  style,
+  ...rest
+}) => {
   const path = getPath()
   const [state, setState] = useState<LayoutRootState>({})
 
@@ -52,7 +61,13 @@ const LayoutRootV1: FC & LayoutV1RootStatic = () => {
 
   // 有层级关系
   return (
-    <View>
+    <View
+      style={{
+        ...style,
+        display: state.popup && state.popup.length > 0 ? 'block' : 'none',
+      }}
+      {...rest}
+    >
       {/* {state.innerLayer} */}
       {state.popup}
       {/* {state.modal}

package/src/component/page/style.less

@@ -7,6 +7,14 @@
   &.m-page-white {
     background: var(--m-color-bg-white);
   }
+  .m-page-wrapper {
+    overflow: auto;
+  }
+
+  .m-page-side {
+    overflow-x: hidden;
+    overflow: auto;
+  }
 
   .m-page-content {
     flex: 1;

package/src/component/popup/popup.tsx

@@ -38,6 +38,8 @@ const PopupBase: FC<PopupProps> = ({
   /** 动画有卡顿现象，先禁用 */
   disabledAnimate = true,
   children,
+  hasCustomTab = true,
+  disableBottomSafeArea,
   ...rest
 }) => {
   devWarnForHook(() => {
@@ -57,6 +59,7 @@ const PopupBase: FC<PopupProps> = ({
       'm-animated-slide-in-left': left,
       'm-animated-slide-in-right': right,
       'm-animated-slide-in-bottom': bottom,
+      'm-bottom-safe-area': !disableBottomSafeArea,
     },
     className
   )
@@ -90,7 +93,7 @@ const PopupBase: FC<PopupProps> = ({
           </Flex>
         )}
         <View className='m-popup-content'>{children}</View>
-        <CustomTabbar />
+        {hasCustomTab && <CustomTabbar />}
       </View>
     </View>
   )

package/src/component/popup/popup_v1.tsx

@@ -51,6 +51,7 @@ const PopupBase: FC<PopupV1Props> = ({
   titleClassName,
   titleCenter,
   clickMaskClose = true,
+  disableBottomSafeArea,
   ...rest
 }) => {
   devWarnForHook(() => {
@@ -128,7 +129,7 @@ const PopupBase: FC<PopupV1Props> = ({
           </Flex>
         )}
         <View className='m-popup-content'>{children}</View>
-        <CustomTabbar />
+        {!disableBottomSafeArea && <CustomTabbar />}
       </View>
     </View>
   )

package/src/component/popup/style.less

@@ -65,7 +65,7 @@
 
 @supports (bottom: constant(safe-area-inset-bottom)) or
   (bottom: env(safe-area-inset-bottom)) {
-  .m-popup {
+  .m-popup.m-bottom-safe-area {
     padding-bottom: constant(safe-area-inset-bottom); /* 兼容 iOS < 11.2 */
     padding-bottom: env(safe-area-inset-bottom); /* 兼容 iOS >= 11.2 */
   }

package/src/component/popup/types.ts

@@ -19,6 +19,10 @@ interface PopupProps extends HTMLAttributes<HTMLDivElement> {
   disabledAnimate?: boolean
   /** 内部用 */
   isPickPopup?: boolean
+  /** 禁用下方安全边距，默认为false */
+  disableBottomSafeArea?: boolean
+  /** 预留底部自定义导航高度,默认为true */
+  hasCustomTab?: boolean
 }
 
 interface PopupStaticsTypes {

package/src/component/text_field/TextField.tsx

@@ -17,6 +17,8 @@ const ios = mp && wx.getSystemInfoSync().platform === 'ios'
 interface TextFieldState {
   /** 是否输入状态 */
   active: boolean
+  /** 是否需要清空 */
+  needClear: boolean
 }
 
 const store = observable({ active: '' })
@@ -43,6 +45,7 @@ export class TextField extends Component<TextFieldProps, TextFieldState> {
 
   state = {
     active: false,
+    needClear: false,
   }
 
   id = uniqueId('textField-')
@@ -82,12 +85,17 @@ export class TextField extends Component<TextFieldProps, TextFieldState> {
       })
     }
     this.props.onClick && this.props.onClick(e)
+    this.setState({ ...this.state, needClear: !!this.props.rewriteMode })
   }
 
   onInput(e: any) {
     if (this.props.disabled) return
     if (!mp) e.persist()
     let value = mp ? e.detail.value : e.target.value
+    if (this.state.needClear) {
+      value = value.slice(-1)
+      this.setState({ ...this.state, needClear: false })
+    }
     const { min, max } = this.props
     if (
       value &&
@@ -97,6 +105,11 @@ export class TextField extends Component<TextFieldProps, TextFieldState> {
       const float = parseFloat(value.replace(/\D\./g, ''))
       if (isNaN(float)) {
         value = ''
+      } else if (value.endsWith('.0')) {
+        // 处理特殊情况
+        if (this.props.fractionDigits === 0) {
+          value = value.replace(/\.0$/, '')
+        }
       } else {
         value = clamp(
           float,
@@ -159,7 +172,7 @@ export class TextField extends Component<TextFieldProps, TextFieldState> {
       disabled,
       highlight,
       cursorSpacing = 30,
-      maxLength,
+      maxLength = -1,
       confirmType,
       adjustPosition,
       block,
@@ -170,6 +183,7 @@ export class TextField extends Component<TextFieldProps, TextFieldState> {
       onClick,
       onConfirm,
       fractionDigits,
+      alwaysEmbed = true,
       ...rest
       // 注意，不用传给input或area的props要在此列出来，不然rest会带过去
     } = this.props
@@ -179,7 +193,7 @@ export class TextField extends Component<TextFieldProps, TextFieldState> {
 
     const common = {
       disabled: disabled,
-      onInput: this.onInput.bind(this),
+      // onInput: this.onInput.bind(this),
       onChange: this.onInput.bind(this),
       onClick: this.onClick.bind(this),
       onBlur: () => {
@@ -207,6 +221,7 @@ export class TextField extends Component<TextFieldProps, TextFieldState> {
         focus,
         password,
         placeholderClass: 'text-field-placeholder',
+        alwaysEmbed: alwaysEmbed,
         onConfirm,
       })
     } else {
@@ -224,6 +239,7 @@ export class TextField extends Component<TextFieldProps, TextFieldState> {
           active: highlight || active,
           highlight,
           disabled,
+          block,
         })}
         width={width}
         style={style}
@@ -313,3 +329,7 @@ export class TextField extends Component<TextFieldProps, TextFieldState> {
 }
 
 export default TextField
+
+export function AutoPreview_TextField() {
+  return <TextField value='test' onChange={() => {}} />
+}

package/src/component/text_field/stories.tsx

@@ -68,7 +68,6 @@ WithButton.args = {
   right: (
     <Button
       mini
-      noRound
       onClick={() => new Promise((resolve) => setTimeout(resolve, 3000))}
     >
       获取验证码

package/src/component/text_field/style.less

@@ -41,6 +41,9 @@
       background-color: var(--m-color-bg-secondary);
     }
   }
+  &.block {
+    width: 100%;
+  }
   .text-field-placeholder {
     color: var(--m-color-placeholder);
   }

package/src/component/text_field/types.ts

@@ -7,7 +7,7 @@ interface TextFieldProps
     'style' | 'onBlur' | 'onFocus' | 'onClick' | 'onChange' | 'type'
   > {
   value: string
-  /** 输入事件, e在web中为ChangeEvent，在小程序中为onInputEventDetail */
+  /** 输入事件, e在web中为ChangeEvent(value为e.target.value)，在小程序中为onInputEventDetail(value为e.detail.value) */
   onChange?: (e: any) => void
   /** 输入框类型, web端和小程序端取值有差异 */
   type?: InputProps['type']
@@ -63,6 +63,8 @@ interface TextFieldProps
   errClassName?: string
   /** 键盘和输入框距离，小程序特有 */
   cursorSpacing?: number
+  /** 重新获得焦点后，输入前清空现有内容 */
+  rewriteMode?: boolean
   onBlur?: () => void
   onFocus?: () => void
   /**  e在web中和小程序中不一样 */

package/src/index.less

@@ -37,7 +37,8 @@
 @import './component/picker/style.less';
 @import './component/nav/style.less';
 @import './component/date_selector/style.less';
-@import './component//text_field/style.less';
+@import './component/text_field/style.less';
+@import './component/error/style.less';
 
 // 公共
 @import './less/mixin';

package/src/index.ts

@@ -42,3 +42,4 @@ export * from './component/text_field'
 export * from './component/digital_keyboard'
 export * from './component/draggable'
 export * from './component/form'
+export * from './component/error'

package/src/less/animation.less

@@ -1,6 +1,7 @@
 .m-animated {
-  animation-duration: 0.2s;
-  animation-fill-mode: none;
+  // animation-duration: 0.2s;
+  // animation-fill-mode: none;
+  transition: all 0.2s;
 }
 
 .m-animated-fade-in {
@@ -153,10 +154,14 @@
 
 @keyframes slide-in-bottom {
   from {
-    transform: translate3d(0, 100%, 0);
+    // transform: translate3d(0, 100%, 0);
+    max-height: 0%;
+    overflow: hidden;
   }
 
   to {
-    transform: translate3d(0, 0, 0);
+    // transform: translate3d(0, 0, 0);
+    max-height: 100%;
+    overflow: hidden;
   }
 }

package/src/less/border.less

@@ -98,13 +98,22 @@
 }
 
 .m-border-radius-circle {
-  border-radius: 50%;
+  border-radius: 50% !important;
 }
 
 .m-border-radius-chip {
-  border-radius: 100px;
+  border-radius: 100px !important;
 }
 
 .m-border-radius-5 {
-  border-radius: 5px;
+  border-radius: 5px !important;
 }
+
+// 生成圆角, .m-border-radius-{1-10}
+.generate-size(@size) when (@size<=10) {
+  .m-border-radius-@{size} {
+    border-radius: @size * 1px !important;
+  }
+  .generate-size(@size + 1);
+}
+.generate-size(0);

package/src/less/distance.less

@@ -17,76 +17,72 @@
   .generate-gap-more-direction(@num, @name, @direction1, @direction2, (@i + 4));
 }
 
-@size: {
-  0: 0;
-  5: 5px;
-  10: 10px;
-  15: 15px;
-  20: 20px;
-};
-
-each(@size, {
-  .m-gap-@{key} {
+.generate-distances(@value) when (@value<=30) {
+  .m-gap-@{value} {
     display: inline-block !important;
-    height: @value !important;
-    width: @value !important;
+    height: @value * 1px !important;
+    width: @value * 1px !important;
   }
 
-  .m-padding-@{key} {
-    padding: @value !important;
+  .m-padding-@{value} {
+    padding: @value * 1px !important;
   }
 
-  .m-padding-top-@{key} {
-    padding-top: @value !important;
+  .m-padding-top-@{value} {
+    padding-top: @value * 1px !important;
   }
 
-  .m-padding-bottom-@{key} {
-    padding-bottom: @value !important;
+  .m-padding-bottom-@{value} {
+    padding-bottom: @value * 1px !important;
   }
-  .m-padding-left-@{key} {
-    padding-left: @value !important;
+  .m-padding-left-@{value} {
+    padding-left: @value * 1px !important;
   }
 
-  .m-padding-right-@{key} {
-    padding-right: @value !important;
+  .m-padding-right-@{value} {
+    padding-right: @value * 1px !important;
   }
 
-  .m-padding-lr-@{key} {
-    padding-left: @value !important;
-    padding-right: @value !important;
+  .m-padding-lr-@{value} {
+    padding-left: @value * 1px !important;
+    padding-right: @value * 1px !important;
   }
 
-  .m-padding-tb-@{key} {
-    padding-top: @value !important;
-    padding-bottom: @value !important;
+  .m-padding-tb-@{value} {
+    padding-top: @value * 1px !important;
+    padding-bottom: @value * 1px !important;
   }
 
-  .m-margin-@{key} {
-    margin: @value !important;
+  .m-margin-@{value} {
+    margin: @value * 1px !important;
   }
 
-  .m-margin-top-@{key} {
-    margin-top: @value !important;
+  .m-margin-top-@{value} {
+    margin-top: @value * 1px !important;
   }
 
-  .m-margin-bottom-@{key} {
-    margin-bottom: @value !important;
+  .m-margin-bottom-@{value} {
+    margin-bottom: @value * 1px !important;
   }
-  .m-margin-left-@{key} {
-    margin-left: @value !important;
+  .m-margin-left-@{value} {
+    margin-left: @value * 1px !important;
   }
 
-  .m-margin-right-@{key} {
-    margin-right: @value !important;
+  .m-margin-right-@{value} {
+    margin-right: @value * 1px !important;
   }
 
-  .m-margin-lr-@{key} {
-    margin-left: @value !important;
-    margin-right: @value !important;
+  .m-margin-lr-@{value} {
+    margin-left: @value * 1px !important;
+    margin-right: @value * 1px !important;
   }
 
-  .m-margin-tb-@{key} {
-    margin-top: @value !important;
-    margin-bottom: @value !important;
+  .m-margin-tb-@{value} {
+    margin-top: @value * 1px !important;
+    margin-bottom: @value * 1px !important;
   }
-});
+
+  .generate-distances(@value + 1);
+}
+
+.generate-distances(0);

package/src/less/text.less

@@ -66,6 +66,10 @@
   text-decoration: line-through;
 }
 
+.m-text-normal {
+  font-weight: normal;
+}
+
 .m-text-bold {
   font-weight: bold;
 }
@@ -105,14 +109,20 @@ each(@colors,.(@color,@colorKey,@index){
 });
 
 // 生成size, .m-text-{8-32}, --m-size-text-{8-32}
-.generate-size(@size) when (@size<=32) {
-  :root,
-  page {
+:root,
+page {
+  .generate-text-variables(@size) when (@size<=32) {
+    .generate-text-variables(@size + 1);
     --m-size-text-@{size}: ~'@{size}px';
   }
+  .generate-text-variables(8);
+}
+
+.generate-text-size(@size) when (@size<=32) {
   .m-text-@{size} {
-    font-size: e(%('var(--m-size-text-%s)!important', @size));
+    // font-size: e(%('var(--m-size-text-%s)!important', @size));
+    font-size: @size * 1px;
   }
-  .generate-size(@size + 2);
+  .generate-text-size(@size + 1);
 }
-.generate-size(8);
+.generate-text-size(8);