@gm-pc/react 1.20.1 → 1.21.1-alpha.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gm-pc/react",
-  "version": "1.20.1",
+  "version": "1.21.1-alpha.4",
   "description": "观麦前端基础组件库",
   "author": "liyatang <liyatang@qq.com>",
   "homepage": "https://github.com/gmfe/gm-pc#readme",
@@ -24,7 +24,7 @@
   "dependencies": {
     "@gm-common/hooks": "^2.10.0",
     "@gm-common/tool": "^2.10.0",
-    "@gm-pc/locales": "^1.20.1",
+    "@gm-pc/locales": "^1.21.0",
     "big.js": "^6.0.1",
     "classnames": "^2.2.5",
     "lodash": "^4.17.19",
@@ -48,5 +48,5 @@
     "react-router-dom": "^5.2.0",
     "react-window": "^1.8.5"
   },
-  "gitHead": "dadfb9d7abcb996eb3d7c2b93add31fea9384929"
+  "gitHead": "0ca36eb94f309b229dd8f7e29756e86802fe3de2"
 }

package/src/component/button/button.tsx

@@ -1,8 +1,9 @@
-import React, { FC, useState, MouseEvent, AnchorHTMLAttributes } from 'react'
+import React, { FC, useState, MouseEvent, AnchorHTMLAttributes, useContext } from 'react'
 import _ from 'lodash'
 import classNames from 'classnames'
 import { is } from '@gm-common/tool'
 import { Loading } from '../loading'
+import { ConfigContext } from '../config_provider'
 
 type ButtonType = 'default' | 'primary' | 'success' | 'danger' | 'link'
 type ButtonSize = 'small' | 'middle' | 'large'
@@ -36,6 +37,7 @@ const Button: FC<ButtonProps> = ({
   ...rest
 }) => {
   const [isLoading, setIsLoading] = useState(false)
+  const { fontSize } = useContext(ConfigContext)
 
   const loadFlag = loading || isLoading
 
@@ -69,8 +71,9 @@ const Button: FC<ButtonProps> = ({
         `gm-btn gm-btn-${type}`,
         {
           'gm-btn-block': block,
-          [`gm-btn-${size}`]: size,
           'gm-btn-plain': type !== 'link' && plain,
+          [`gm-btn-${size}`]: size,
+          [`gm-btn-text-${fontSize}`]: !!fontSize,
         },
         className
       )}

package/src/component/button/style.less

@@ -77,6 +77,11 @@
   &:focus {
     outline: none;
   }
+
+  /** 字体大小 */
+  &.gm-btn-text-sm {
+    font-size: 14px;
+  }
 }
 
 @keyframes gm-btn-rotating {

package/src/component/config_provider/config_provider.tsx

@@ -0,0 +1,16 @@
+import React, { FC } from 'react'
+import { ConfigContext } from './context'
+
+/** xs: 12px sm: 14px */
+export type FontSizeType = 'xs' | 'sm'
+
+export interface ConfigProviderProps {
+  fontSize?: FontSizeType
+}
+
+// 加一个div加上css var
+const ConfigProvider: FC<ConfigProviderProps> = ({ children, ...config }) => {
+  return <ConfigContext.Provider value={config}>{children}</ConfigContext.Provider>
+}
+
+export default ConfigProvider

package/src/component/config_provider/context.ts

@@ -0,0 +1,10 @@
+import { createContext } from 'react'
+import { FontSizeType } from './config_provider'
+
+export interface ConfigConsumerProps {
+  fontSize?: FontSizeType
+}
+
+export const ConfigContext = createContext<ConfigConsumerProps>({})
+
+export const ConfigConsumer = ConfigContext.Consumer

package/src/component/config_provider/index.ts

@@ -0,0 +1,3 @@
+export { default as ConfigProvider } from './config_provider'
+export type { ConfigProviderProps } from './config_provider'
+export * from './context'

package/src/component/form/form.tsx

@@ -11,6 +11,7 @@ import classNames from 'classnames'
 import FormContext from './context'
 import Validator from '../../validator'
 import { FormProps, FormItemProps } from './types'
+import { ConfigConsumer } from '../config_provider'
 const { Provider } = FormContext
 
 interface FormState {
@@ -117,14 +118,22 @@ class Form extends Component<FormProps, FormState> {
       <Provider
         value={{ labelWidth, disabledCol, inline, btnPosition, colWidth, canValidate }}
       >
-        <form
-          {...rest}
-          className={classNames('gm-form', { 'form-inline': inline }, className)}
-          onSubmit={this._handleSubmit}
-        >
-          {children}
-          {hasButtonInGroup && <button type='submit' style={{ display: 'none' }} />}
-        </form>
+        <ConfigConsumer>
+          {({ fontSize }) => (
+            <form
+              {...rest}
+              className={classNames(
+                'gm-form',
+                { 'form-inline': inline, [`gm-form-text-${fontSize}`]: fontSize },
+                className
+              )}
+              onSubmit={this._handleSubmit}
+            >
+              {children}
+              {hasButtonInGroup && <button type='submit' style={{ display: 'none' }} />}
+            </form>
+          )}
+        </ConfigConsumer>
       </Provider>
     )
   }

package/src/component/form/style.less

@@ -58,6 +58,19 @@
     right: -28px;
     top: 7px;
   }
+
+  /** 字体大小 */
+  &.gm-form-text-sm {
+    font-size: var(--gm-size-text-sm);
+
+    .gm-form-label {
+      font-size: var(--gm-size-text-sm);
+    }
+
+    .gm-form-control {
+      font-size: var(--gm-size-text-sm);
+    }
+  }
 }
 
 @media (max-width: 768px) {

package/src/component/input/input.tsx

@@ -1,17 +1,21 @@
-import React, { forwardRef, InputHTMLAttributes } from 'react'
+import React, { forwardRef, InputHTMLAttributes, useContext } from 'react'
 import classNames from 'classnames'
+import { ConfigContext } from '../config_provider'
 
 type InputProps = InputHTMLAttributes<HTMLInputElement>
 
 /** 没什么，就一个input，多了个类名 gm-input 用来和库配合做UI */
 const Input = forwardRef<HTMLInputElement, InputProps>((props, ref) => {
   const { className, value = '', ...rest } = props
+  const { fontSize } = useContext(ConfigContext)
   return (
     <input
       ref={ref}
       {...rest}
       value={value}
-      className={classNames('gm-input', className)}
+      className={classNames('gm-input', className, {
+        [`gm-input-${fontSize}`]: fontSize,
+      })}
     />
   )
 })

package/src/component/input/style.less

@@ -2,6 +2,11 @@
   .gmFormControl();
 
   .gmDisabledBgWith();
+
+  /** 字体大小 */
+  &.gm-input-sm {
+    font-size: var(--gm-size-text-sm);
+  }
 }
 
 .gm-input-close {

package/src/component/level_select/level_select.tsx

@@ -7,6 +7,7 @@ import { LevelList } from '../level_list'
 import { getLevel } from '../level_list/utils'
 import _ from 'lodash'
 import { judgeFunction } from '../../common/utils'
+import { ConfigConsumer, ConfigProvider, ConfigProviderProps } from '../config_provider'
 
 interface LevelSelectState<V> {
   willActiveSelected: V[]
@@ -48,22 +49,24 @@ class LevelSelect<V = any> extends Component<LevelSelectProps<V>, LevelSelectSta
     this.setState({ willActiveSelected })
   }
 
-  private _renderPopup = (): ReactNode => {
+  private _renderPopup = (config: ConfigProviderProps): ReactNode => {
     const { titles, data, selected, right, onlySelectLeaf } = this.props
     const { willActiveSelected } = this.state
     return (
-      <Flex justifyEnd={right}>
-        <LevelList<V>
-          isReverse={right}
-          data={data}
-          onWillActiveSelect={this._handleWillActiveSelect}
-          willActiveSelected={willActiveSelected}
-          selected={selected}
-          onSelect={this._handleSelect}
-          titles={titles}
-          onlySelectLeaf={onlySelectLeaf}
-        />
-      </Flex>
+      <ConfigProvider {...config}>
+        <Flex justifyEnd={right}>
+          <LevelList<V>
+            isReverse={right}
+            data={data}
+            onWillActiveSelect={this._handleWillActiveSelect}
+            willActiveSelected={willActiveSelected}
+            selected={selected}
+            onSelect={this._handleSelect}
+            titles={titles}
+            onlySelectLeaf={onlySelectLeaf}
+          />
+        </Flex>
+      </ConfigProvider>
     )
   }
 
@@ -192,16 +195,20 @@ class LevelSelect<V = any> extends Component<LevelSelectProps<V>, LevelSelectSta
   render() {
     const { disabled, children, popoverType, right } = this.props
     return (
-      <Popover
-        ref={this._popoverRef}
-        right={right}
-        disabled={disabled}
-        popup={this._renderPopup()}
-        type={popoverType}
-        pureContainer
-      >
-        {children ?? this._renderTarget()}
-      </Popover>
+      <ConfigConsumer>
+        {(config) => (
+          <Popover
+            ref={this._popoverRef}
+            right={right}
+            disabled={disabled}
+            popup={this._renderPopup(config)}
+            type={popoverType}
+            pureContainer
+          >
+            {children ?? this._renderTarget()}
+          </Popover>
+        )}
+      </ConfigConsumer>
     )
   }
 }

package/src/component/list/base.tsx

@@ -3,6 +3,7 @@ import classNames from 'classnames'
 import { xor, flatMap, isNil, noop } from 'lodash'
 import { ListBaseProps } from './types'
 import { ListDataItem } from '../../types'
+import { ConfigConsumer } from '../config_provider'
 
 class Base<V = any> extends Component<ListBaseProps<V>> {
   static defaultProps = {
@@ -83,34 +84,45 @@ class Base<V = any> extends Component<ListBaseProps<V>> {
 
     let sequenceDataIndex = -1
     return (
-      <div
-        {...rest}
-        ref={this._listRef}
-        className={classNames('gm-list', { 'gm-list-group': isGroupList }, className)}
-      >
-        {data.map((group, gIndex) => (
-          <div key={gIndex} className='gm-list-group-item'>
-            <div className='gm-list-label'>{group.label}</div>
-            {group.children.map((item, index) => {
-              sequenceDataIndex++
-              return (
-                <div
-                  key={`${index}_${item.value}`}
-                  {...getItemProps!(item)}
-                  className={classNames('gm-list-item', {
-                    active: selected.includes(item.value),
-                    'will-active': willActiveIndex === sequenceDataIndex,
-                    disabled: item.disabled,
-                  })}
-                  onClick={() => this._handleSelect(item)}
-                >
-                  {renderItem!(item, index)}
-                </div>
-              )
-            })}
+      <ConfigConsumer>
+        {({ fontSize }) => (
+          <div
+            {...rest}
+            ref={this._listRef}
+            className={classNames(
+              'gm-list',
+              {
+                'gm-list-group': isGroupList,
+                [`gm-list-text-${fontSize}`]: fontSize,
+              },
+              className
+            )}
+          >
+            {data.map((group, gIndex) => (
+              <div key={gIndex} className='gm-list-group-item'>
+                <div className='gm-list-label'>{group.label}</div>
+                {group.children.map((item, index) => {
+                  sequenceDataIndex++
+                  return (
+                    <div
+                      key={`${index}_${item.value}`}
+                      {...getItemProps!(item)}
+                      className={classNames('gm-list-item', {
+                        active: selected.includes(item.value),
+                        'will-active': willActiveIndex === sequenceDataIndex,
+                        disabled: item.disabled,
+                      })}
+                      onClick={() => this._handleSelect(item)}
+                    >
+                      {renderItem!(item, index)}
+                    </div>
+                  )
+                })}
+              </div>
+            ))}
           </div>
-        ))}
-      </div>
+        )}
+      </ConfigConsumer>
     )
   }
 }

package/src/component/list/style.less

@@ -48,4 +48,11 @@
       padding: 9px 10px 9px 22px;
     }
   }
+
+  /** 字体大小 */
+  &.gm-list-text-sm {
+    .gm-list-item {
+      font-size: var(--gm-size-text-sm);
+    }
+  }
 }

package/src/component/more_select/base.tsx

@@ -19,6 +19,7 @@ import { Loading } from '../loading'
 import { getLocale } from '@gm-pc/locales'
 import { ListBase } from '../list'
 import { findDOMNode } from 'react-dom'
+import { ConfigConsumer, ConfigProvider, ConfigProviderProps } from '../config_provider'
 
 interface MoreSelectBaseState {
   searchValue: string
@@ -231,7 +232,7 @@ class MoreSelectBase<V extends string | number = string> extends Component<
     )
   }
 
-  private _renderList = (): ReactNode => {
+  private _renderList = (config: ConfigProviderProps): ReactNode => {
     const {
       selected = [],
       multiple,
@@ -245,46 +246,48 @@ class MoreSelectBase<V extends string | number = string> extends Component<
     const { loading, searchValue, willActiveIndex } = this.state
     const filterData = this._getFilterData()
     return (
-      <div
-        className={classNames('gm-more-select-popup', popupClassName)}
-        onKeyDown={this._handlePopupKeyDown}
-      >
-        <div className='gm-more-select-popup-input'>
-          <Input
-            ref={this._inputRef}
-            autoFocus
-            value={searchValue}
-            onChange={this._handleChange}
-            placeholder={searchPlaceholder}
-          />
-        </div>
-        <div style={{ height: listHeight }}>
-          {loading && (
-            <Flex alignCenter justifyCenter className='gm-bg gm-padding-5'>
-              <Loading size='20px' />
-            </Flex>
-          )}
-          {!loading && !filterData.length && this._renderEmpty()}
-          {!loading && !!filterData.length && (
-            <ListBase
-              selected={selected.map((v) => v.value)}
-              data={filterData}
-              multiple={multiple}
-              isGroupList={isGroupList}
-              className='gm-border-0'
-              renderItem={renderListItem}
-              onSelect={this._handleSelect}
-              isScrollTo
-              willActiveIndex={willActiveIndex!}
-              style={{ height: listHeight }}
+      <ConfigProvider {...config}>
+        <div
+          className={classNames('gm-more-select-popup', popupClassName)}
+          onKeyDown={this._handlePopupKeyDown}
+        >
+          <div className='gm-more-select-popup-input'>
+            <Input
+              ref={this._inputRef}
+              autoFocus
+              value={searchValue}
+              onChange={this._handleChange}
+              placeholder={searchPlaceholder}
             />
-          )}
+          </div>
+          <div style={{ height: listHeight }}>
+            {loading && (
+              <Flex alignCenter justifyCenter className='gm-bg gm-padding-5'>
+                <Loading size='20px' />
+              </Flex>
+            )}
+            {!loading && !filterData.length && this._renderEmpty()}
+            {!loading && !!filterData.length && (
+              <ListBase
+                selected={selected.map((v) => v.value)}
+                data={filterData}
+                multiple={multiple}
+                isGroupList={isGroupList}
+                className='gm-border-0'
+                renderItem={renderListItem}
+                onSelect={this._handleSelect}
+                isScrollTo
+                willActiveIndex={willActiveIndex!}
+                style={{ height: listHeight }}
+              />
+            )}
+          </div>
+          {!loading &&
+            !!filterData.length &&
+            renderCustomizedBottom &&
+            renderCustomizedBottom(this._popoverRef)}
         </div>
-        {!loading &&
-          !!filterData.length &&
-          renderCustomizedBottom &&
-          renderCustomizedBottom(this._popoverRef)}
-      </div>
+      </ConfigProvider>
     )
   }
 
@@ -324,69 +327,80 @@ class MoreSelectBase<V extends string | number = string> extends Component<
       children,
     } = this.props
     return (
-      <div
-        ref={this._baseRef}
-        onClick={this._handleMoreSelectClick}
-        className={classNames(
-          'gm-more-select',
-          {
-            disabled,
-            'gm-more-select-multiple': multiple,
-          },
-          className
-        )}
-        style={style}
-      >
-        <Popover
-          ref={this._popoverRef}
-          type={popoverType}
-          popup={this._renderList}
-          disabled={disabled}
-          isInPopup={isInPopup}
-          onVisibleChange={this._handlePopoverVisibleChange}
-        >
-          {children ?? (
-            <Flex
-              ref={this._selectionRef}
-              tabIndex={0}
-              wrap
-              className='gm-more-select-selected'
+      <ConfigConsumer>
+        {(config) => (
+          <div
+            ref={this._baseRef}
+            onClick={this._handleMoreSelectClick}
+            className={classNames(
+              'gm-more-select',
+              {
+                disabled,
+                'gm-more-select-multiple': multiple,
+              },
+              className
+            )}
+            style={style}
+          >
+            <Popover
+              ref={this._popoverRef}
+              type={popoverType}
+              popup={() => this._renderList(config)}
+              disabled={disabled}
+              isInPopup={isInPopup}
+              onVisibleChange={this._handlePopoverVisibleChange}
             >
-              {selected.length !== 0 ? (
-                selected.map((item) => (
-                  <Flex key={item.value as any} className='gm-more-select-selected-item'>
-                    <Popover
-                      disabled={!this.props.isKeyboard}
-                      type='hover'
-                      popup={<div className='gm-padding-10'>{item.text}</div>}
-                    >
-                      <Flex flex column>
-                        {renderSelected!(item)}
+              {children ?? (
+                <Flex
+                  ref={this._selectionRef}
+                  tabIndex={0}
+                  wrap
+                  className='gm-more-select-selected'
+                >
+                  {selected.length !== 0 ? (
+                    selected.map((item) => (
+                      <Flex
+                        key={item.value as any}
+                        className='gm-more-select-selected-item'
+                      >
+                        <Popover
+                          disabled={!this.props.isKeyboard}
+                          type='hover'
+                          popup={<div className='gm-padding-10'>{item.text}</div>}
+                        >
+                          <Flex flex column>
+                            {renderSelected!(item)}
+                          </Flex>
+                        </Popover>
+                        {multiple ? (
+                          <SVGRemove
+                            className='gm-cursor gm-more-select-clear-btn'
+                            onClick={
+                              disabled ? _.noop : this._handleClear.bind(this, item)
+                            }
+                          />
+                        ) : (
+                          !disabledClose && ( // 是否不限时清除按钮，仅单选可用
+                            <SVGCloseCircle
+                              onClick={
+                                disabled ? _.noop : this._handleClear.bind(this, item)
+                              }
+                              className='gm-cursor gm-more-select-clear-btn'
+                            />
+                          )
+                        )}
                       </Flex>
-                    </Popover>
-                    {multiple ? (
-                      <SVGRemove
-                        className='gm-cursor gm-more-select-clear-btn'
-                        onClick={disabled ? _.noop : this._handleClear.bind(this, item)}
-                      />
-                    ) : (
-                      !disabledClose && ( // 是否不限时清除按钮，仅单选可用
-                        <SVGCloseCircle
-                          onClick={disabled ? _.noop : this._handleClear.bind(this, item)}
-                          className='gm-cursor gm-more-select-clear-btn'
-                        />
-                      )
-                    )}
-                  </Flex>
-                ))
-              ) : (
-                // 加多个 &nbsp; 避免对齐问题，有文本才有对齐
-                <div className='gm-text-placeholder'>{placeholder}&nbsp; </div>
+                    ))
+                  ) : (
+                    // 加多个 &nbsp; 避免对齐问题，有文本才有对齐
+                    <div className='gm-text-placeholder'>{placeholder}&nbsp; </div>
+                  )}
+                </Flex>
               )}
-            </Flex>
-          )}
-        </Popover>
-      </div>
+            </Popover>
+          </div>
+        )}
+      </ConfigConsumer>
     )
   }
 }

package/src/component/nav/style.less

@@ -25,8 +25,8 @@
     overflow-y: auto;
 
     &::-webkit-scrollbar {
-      width: 0;
-      height: 0;
+      width: 0 !important;
+      height: 0 !important;
     }
   }
 

package/src/component/recommend_input/recommend_input.tsx

@@ -1,4 +1,4 @@
-import React, { useMemo, useRef, FC, FocusEvent } from 'react'
+import React, { useMemo, useRef, FC, FocusEvent, useContext } from 'react'
 import { Popover } from '../popover'
 import { Input } from '../input'
 import { List } from '../list'
@@ -6,6 +6,7 @@ import _ from 'lodash'
 import { pinYinFilter } from '@gm-common/tool'
 import SVGCloseCircle from '../../svg/close-circle.svg'
 import classNames from 'classnames'
+import { ConfigContext, ConfigProvider } from '../config_provider'
 
 interface DataItem {
   text: string
@@ -31,6 +32,7 @@ const RecommendInput: FC<RecommendInputProps> = ({
   ...rest
 }) => {
   const popoverRef = useRef<Popover>(null)
+  const config = useContext(ConfigContext)
 
   // 构造list需要的数据结构
   const _data = useMemo(() => {
@@ -68,11 +70,13 @@ const RecommendInput: FC<RecommendInputProps> = ({
       type='realFocus'
       popup={
         searchData.length > 0 ? (
-          <List
-            data={searchData}
-            onSelect={handleSelect}
-            style={{ height: listHeight }}
-          />
+          <ConfigProvider {...config}>
+            <List
+              data={searchData}
+              onSelect={handleSelect}
+              style={{ height: listHeight }}
+            />
+          </ConfigProvider>
         ) : (
           <></> // 需要element
         )

package/src/component/select/select.tsx

@@ -7,6 +7,8 @@ import { Selection } from '../selection'
 import { List } from '../list'
 import { ListDataItem } from '../../types'
 import { judgeFunction } from '../../common/utils'
+import { ConfigConsumer, ConfigProvider } from '../config_provider'
+import { ConfigProviderProps, FontSizeType } from '../config_provider/config_provider'
 
 interface SelectState {
   willActiveIndex: number
@@ -108,26 +110,28 @@ class Select<V = any> extends Component<SelectProps<V>, SelectState> {
 
     const selected = newData.find((v) => v.value === value)
 
-    const popup = (
+    const popup = (config?: ConfigProviderProps) => (
       <>
-        <List
-          data={newData}
-          selected={value}
-          onSelect={this._handleChange}
-          renderItem={renderItem}
-          willActiveIndex={willActiveIndex}
-          className='gm-border-0'
-          style={{ maxHeight: '250px' }}
-        />
-        {addonLast && (
-          <div
-            onClick={() => {
-              this._popupRef.current!.apiDoSetActive()
-            }}
-          >
-            {addonLast}
-          </div>
-        )}
+        <ConfigProvider {...config}>
+          <List
+            data={newData}
+            selected={value}
+            onSelect={this._handleChange}
+            renderItem={renderItem}
+            willActiveIndex={willActiveIndex}
+            className='gm-border-0'
+            style={{ maxHeight: '250px' }}
+          />
+          {addonLast && (
+            <div
+              onClick={() => {
+                this._popupRef.current!.apiDoSetActive()
+              }}
+            >
+              {addonLast}
+            </div>
+          )}
+        </ConfigProvider>
       </>
     )
 
@@ -135,27 +139,31 @@ class Select<V = any> extends Component<SelectProps<V>, SelectState> {
     const handleChange = _.noop
 
     return (
-      <Popover
-        ref={this._popupRef}
-        type={popoverType}
-        disabled={disabled}
-        popup={popup}
-        isInPopup={isInPopup}
-      >
-        <Selection
-          {...rest}
-          ref={this._selectionRef}
-          selected={selected}
-          onSelect={handleChange}
-          disabled={disabled}
-          disabledClose
-          clean={clean}
-          renderSelected={renderSelected}
-          className={classNames('gm-select', className)}
-          noInput
-          onKeyDown={this._handleKeyDown}
-        />
-      </Popover>
+      <ConfigConsumer>
+        {(config) => (
+          <Popover
+            ref={this._popupRef}
+            type={popoverType}
+            disabled={disabled}
+            popup={popup(config)}
+            isInPopup={isInPopup}
+          >
+            <Selection
+              {...rest}
+              ref={this._selectionRef}
+              selected={selected}
+              onSelect={handleChange}
+              disabled={disabled}
+              disabledClose
+              clean={clean}
+              renderSelected={renderSelected}
+              className={classNames('gm-select', className)}
+              noInput
+              onKeyDown={this._handleKeyDown}
+            />
+          </Popover>
+        )}
+      </ConfigConsumer>
     )
   }
 }

package/src/component/selection/selection.tsx

@@ -12,6 +12,7 @@ import _ from 'lodash'
 import classNames from 'classnames'
 import SVGCloseCircle from '../../svg/close-circle.svg'
 import { IconDownUp } from '../icon_down_up'
+import { ConfigConsumer } from '../config_provider'
 
 type Selected = any
 
@@ -80,67 +81,79 @@ class Selection extends Component<SelectionProps> {
     }
 
     return (
-      <div
-        {...rest}
-        className={classNames(
-          'gm-selection',
-          {
-            disabled,
-            'gm-selection-disabled-clean': clean,
-            'gm-selection-disabled-close': disabledClose,
-          },
-          className
-        )}
-      >
-        {noInput ? (
+      <ConfigConsumer>
+        {({ fontSize }) => (
           <div
-            ref={this._inputRef}
-            // @ts-ignore
-            disabled={disabled}
-            className='gm-form-control gm-selection-selected gm-text-ellipsis'
-            tabIndex={0}
-            onKeyDown={onKeyDown}
-          >
-            {text || <span className='gm-text-desc'>{placeholder}</span>}
-          </div>
-        ) : (
-          <input
-            type='text'
-            ref={this._inputRef as RefObject<HTMLInputElement>}
-            disabled={disabled}
-            value={(text as string) || ''}
-            onChange={_.noop}
-            onKeyDown={onKeyDown}
-            placeholder={placeholder}
-            className='gm-form-control gm-selection-selected'
-          />
-        )}
-        {selected && !disabledClose && !clean && (
-          <SVGCloseCircle
-            onClick={this._handleClear}
-            className='gm-selection-icon gm-selection-close-icon'
-          />
-        )}
-        {funIcon ? (
-          cloneElement(funIcon as ReactElement, {
-            className: classNames(
-              'gm-selection-icon',
+            {...rest}
+            className={classNames(
+              'gm-selection',
               {
-                'gm-selection-fun-icon': selected && !disabledClose && !clean,
+                disabled,
+                'gm-selection-disabled-clean': clean,
+                'gm-selection-disabled-close': disabledClose,
+                [`gm-selection-text-${fontSize}`]: fontSize,
               },
-              (funIcon as ReactElement).props?.className
-            ),
-          })
-        ) : (
-          <IconDownUp
-            disabled={disabled}
-            active={(className ?? '').includes('gm-popover-active')}
-            className={classNames('gm-selection-icon', 'gm-selection-down-up', {
-              'gm-selection-fun-icon': selected && !disabledClose && !clean,
-            })}
-          />
+              className
+            )}
+          >
+            {noInput ? (
+              <div
+                ref={this._inputRef}
+                // @ts-ignore
+                disabled={disabled}
+                className={classNames(
+                  'gm-form-control gm-selection-selected gm-text-ellipsis',
+                  {
+                    [`gm-form-control-text-${fontSize}`]: fontSize,
+                  }
+                )}
+                tabIndex={0}
+                onKeyDown={onKeyDown}
+              >
+                {text || <span className='gm-text-desc'>{placeholder}</span>}
+              </div>
+            ) : (
+              <input
+                type='text'
+                ref={this._inputRef as RefObject<HTMLInputElement>}
+                disabled={disabled}
+                value={(text as string) || ''}
+                onChange={_.noop}
+                onKeyDown={onKeyDown}
+                placeholder={placeholder}
+                className={classNames('gm-form-control gm-selection-selected', {
+                  [`gm-form-control-text-${fontSize}`]: fontSize,
+                })}
+              />
+            )}
+            {selected && !disabledClose && !clean && (
+              <SVGCloseCircle
+                onClick={this._handleClear}
+                className='gm-selection-icon gm-selection-close-icon'
+              />
+            )}
+            {funIcon ? (
+              cloneElement(funIcon as ReactElement, {
+                className: classNames(
+                  'gm-selection-icon',
+                  {
+                    'gm-selection-fun-icon': selected && !disabledClose && !clean,
+                  },
+                  (funIcon as ReactElement).props?.className
+                ),
+              })
+            ) : (
+              <IconDownUp
+                disabled={disabled}
+                active={(className ?? '').includes('gm-popover-active')}
+                className={classNames('gm-selection-icon', 'gm-selection-down-up', {
+                  'gm-selection-fun-icon': selected && !disabledClose && !clean,
+                })}
+              />
+            )}
+          </div>
         )}
-      </div>
+      </ConfigConsumer>
     )
   }
 }

package/src/component/selection/style.less

@@ -57,4 +57,9 @@
       border: 1px solid transparent;
     }
   }
+
+  /** 字体大小 */
+  &.gm-selection-text-sm {
+    font-size: var(--gm-size-text-sm);
+  }
 }

package/src/component/tabs/style.less

@@ -61,27 +61,27 @@
   overflow-y: hidden;
 
   &::-webkit-scrollbar {
-    height: 3px;
-    width: 100px;
-    border-radius: 2px;
+    height: 3px !important;
+    width: 100px !important;
+    border-radius: 2px !important;
   }
 
   &::-webkit-scrollbar-track {
-    background: rgb(239, 239, 239);
-    border-radius: 2px;
+    background: rgb(239, 239, 239) !important;
+    border-radius: 2px !important;
   }
 
   &::-webkit-scrollbar-thumb {
-    background: #bfbfbf;
-    border-radius: 10px;
+    background: #bfbfbf !important;
+    border-radius: 10px !important;
   }
 
   &::-webkit-scrollbar-thumb:hover {
-    background: #bfbfbf;
+    background: #bfbfbf !important;
   }
 
   &::-webkit-scrollbar-corner {
-    background: #179a16;
+    background: #179a16 !important;
   }
 }
 

package/src/component/textarea/style.less

@@ -5,4 +5,8 @@
   line-height: normal;
 
   .gmDisabledBgWith();
+
+  &.gm-textarea-text-sm {
+    font-size: var(--gm-size-text-sm);
+  }
 }

package/src/component/textarea/textarea.tsx

@@ -1,11 +1,21 @@
-import React, { forwardRef, TextareaHTMLAttributes } from 'react'
+import React, { forwardRef, TextareaHTMLAttributes, useContext } from 'react'
 import classNames from 'classnames'
+import { ConfigContext } from '../config_provider'
 
 type TextAreaProps = TextareaHTMLAttributes<HTMLTextAreaElement>
 
 const TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>((props, ref) => {
+  const { fontSize } = useContext(ConfigContext)
   const { className, ...rest } = props
-  return <textarea ref={ref} {...rest} className={classNames('gm-textarea', className)} />
+  return (
+    <textarea
+      ref={ref}
+      {...rest}
+      className={classNames('gm-textarea', className, {
+        [`gm-textarea-text-${fontSize}`]: fontSize,
+      })}
+    />
+  )
 })
 
 export default TextArea

package/src/css/other.less

@@ -8,4 +8,8 @@
   .gmFormControl();
 
   .gmDisabledBgWith();
+
+  &.gm-form-control-text-sm {
+    font-size: var(--gm-size-text-sm);
+  }
 }

package/src/css/var/variables.less

@@ -17,6 +17,10 @@
 // grid
 @gm-grid-columns: 24;
 
+// 字体大小
+@gm-font-size-xs: 12px;
+@gm-font-size-sm: 14px;
+
 // 颜色会变
 :root {
   // color
@@ -81,6 +85,9 @@
   --gm-size-text-18: 18px;
   --gm-size-text-20: 20px;
 
+  --gm-size-text-xs: @gm-font-size-xs;
+  --gm-size-text-sm: @gm-font-size-sm;
+
   // 大小
   --gm-size-form-height: 30px;
   --gm-size-border-radius: 2px;

package/src/index.ts

@@ -58,3 +58,4 @@ export * from './component/recommend_input'
 export * from './component/card'
 export * from './component/controlled_form'
 export * from './component/v_browser'
+export * from './component/config_provider'