@gm-pc/react 1.27.5-beta.0 → 1.28.0-alpha.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gm-pc/react",
-  "version": "1.27.5-beta.0",
+  "version": "1.28.0-alpha.0",
   "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.27.5-beta.0",
+    "@gm-pc/locales": "^1.28.0-alpha.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": "62f3bf16794e2d1778f97dc45c342746b9ea53f9"
+  "gitHead": "5349cb6157a22e000f906b3e19fa944ecd48d8d8"
 }

package/src/component/loading/types.ts

@@ -2,7 +2,7 @@ import { HTMLAttributes, ReactNode } from 'react'
 
 interface LoadingProps {
   size?: string
-  type: any
+  type?: any
 }
 
 interface LoadingChunkProps extends HTMLAttributes<HTMLDivElement> {

package/src/component/more_select/base.tsx

@@ -20,13 +20,17 @@ import { getLocale } from '@gm-pc/locales'
 import { ListBase } from '../list'
 import { findDOMNode } from 'react-dom'
 import { ConfigConsumer, ConfigProvider, ConfigProviderProps } from '../config_provider'
-
+import { Checkbox } from '../checkbox'
+import { Switch } from '../switch'
 interface MoreSelectBaseState {
-  searchValue: string | undefined
+  canClear?: boolean
+  searchValue: string
   loading: boolean
   /* keyboard 默认第一个位置 */
   willActiveIndex: number | null
-  isOpen: boolean
+  isCheckedAll: boolean
+  isFilterDelete: boolean
+  displayCount: number
 }
 
 // @todo keydown item disabled
@@ -39,10 +43,12 @@ class MoreSelectBase<V extends string | number = string> extends Component<
   static renderListFilterPinYin = renderListFilterPinYin
 
   readonly state: MoreSelectBaseState = {
-    searchValue: (undefined as unknown) as string,
+    searchValue: '',
     loading: false,
     willActiveIndex: this.props.isKeyboard ? 0 : null,
-    isOpen: false,
+    isCheckedAll: false,
+    isFilterDelete: true,
+    displayCount: 0,
   }
 
   private _isUnmounted = false
@@ -50,6 +56,7 @@ class MoreSelectBase<V extends string | number = string> extends Component<
   private _selectionRef = createRef<HTMLDivElement>()
   private _popoverRef = createRef<Popover>()
   private _inputRef = createRef<HTMLInputElement>()
+  private _resizeObserver: ResizeObserver | null = null
 
   private _filterData: MoreSelectGroupDataItem<V>[] | undefined
 
@@ -64,8 +71,42 @@ class MoreSelectBase<V extends string | number = string> extends Component<
     }
   }
 
+  componentDidMount() {
+    const { maxTagCount, tagItemWidth = 80, omittedTagWidth = 45 } = this.props
+    if (maxTagCount === 'responsive' && this._selectionRef.current) {
+      // HACK: 首次计算
+      setTimeout(() => {
+        if (this._selectionRef.current) {
+          const { width } = this._selectionRef.current.getBoundingClientRect()
+          const availableWidth = width - omittedTagWidth
+          const newDisplayCount = Math.floor(availableWidth / tagItemWidth)
+          if (this.state.displayCount !== newDisplayCount) {
+            this.setState({ displayCount: newDisplayCount > 0 ? newDisplayCount : 0 })
+          }
+        }
+      }, 0)
+
+      this._resizeObserver = new ResizeObserver((entries) => {
+        for (const entry of entries) {
+          const { width } = entry.contentRect
+          // Estimate item width, let's say 80px.
+          const availableWidth = width - omittedTagWidth
+          const newDisplayCount = Math.floor(availableWidth / tagItemWidth)
+
+          if (this.state.displayCount !== newDisplayCount) {
+            this.setState({ displayCount: newDisplayCount })
+          }
+        }
+      })
+      this._resizeObserver.observe(this._selectionRef.current)
+    }
+  }
+
   componentWillUnmount() {
-    this._isUnmounted = false
+    this._isUnmounted = true
+    if (this._resizeObserver) {
+      this._resizeObserver.disconnect()
+    }
   }
 
   public apiDoFocus = (): void => {
@@ -132,13 +173,15 @@ class MoreSelectBase<V extends string | number = string> extends Component<
     event: ChangeEvent<HTMLInputElement>,
     isInitSearch?: boolean
   ): void => {
+    const { onSearch } = this.props
     const searchValue = event.target.value
     this.setState({ searchValue })
-    this._debounceDoSearch(searchValue)
-    if (this.props.isSameAntd) {
-      // eslint-disable-next-line no-unused-expressions
-      this._popoverRef.current?.apiDoSetActive(true)
+    if (onSearch && !this._isUnmounted) {
+      this.setState({
+        loading: true,
+      })
     }
+    this._debounceDoSearch(searchValue)
     setTimeout(() => {
       // eslint-disable-next-line no-unused-expressions
       isInitSearch && this._inputRef.current?.select()
@@ -151,14 +194,12 @@ class MoreSelectBase<V extends string | number = string> extends Component<
   private _doSearch = (query: string): void => {
     const { onSearch, data = [] } = this.props
     if (!this._isUnmounted && onSearch) {
-      const result = onSearch(query, data)
-      if (!result) {
-        return
-      }
       this.setState({ loading: true })
-
+      const result = onSearch(query, data)
       Promise.resolve(result).finally(() => {
-        this.setState({ loading: false })
+        setTimeout(() => {
+          this.setState({ loading: false })
+        }, 50)
       })
     }
   }
@@ -172,7 +213,13 @@ class MoreSelectBase<V extends string | number = string> extends Component<
     onSelect(willSelected)
   }
 
-  private _handlePopupKeyDown = (event: KeyboardEvent): void => {
+  private _handleClearAll = (event: MouseEvent): void => {
+    event.stopPropagation()
+    const { onSelect = _.noop } = this.props
+    onSelect([])
+  }
+
+  private _handlePopupKeyDown = (event: KeyboardEvent<HTMLDivElement>): void => {
     const { onKeyDown } = this.props
     let willActiveIndex = this.state.willActiveIndex as number
     if (!onKeyDown) {
@@ -207,9 +254,9 @@ class MoreSelectBase<V extends string | number = string> extends Component<
   }
 
   private _getFilterData = () => {
-    const { data = [], renderListFilter, renderListFilterType } = this.props
+    const { data = [], renderListFilter, renderListFilterType, onSearch } = this.props
     const { searchValue } = this.state
-    let filterData: MoreSelectGroupDataItem<V>[]
+    let filterData: MoreSelectGroupDataItem<V>[] = []
     if (renderListFilter) {
       filterData = renderListFilter(data, searchValue)
     } else if (renderListFilterType === 'pinyin') {
@@ -238,68 +285,246 @@ class MoreSelectBase<V extends string | number = string> extends Component<
     )
   }
 
-  private _renderSearchInput = () => {
-    const { searchPlaceholder } = this.props
-    const { searchValue } = this.state
+  renderBottom = () => {
+    const {
+      selected = [],
+      isShowDeletedSwitch = true,
+      isShowCheckedAll = true,
+    } = this.props
+    const { isCheckedAll, isFilterDelete } = this.state
+    const flatFilterData = this._getFlatFilterData()
+
+    // 根据过滤状态决定是否过滤已删除商品
+    const availableData = isFilterDelete
+      ? flatFilterData.filter((item) => !item.deleted)
+      : flatFilterData
+
+    // 检查是否所有可用数据都被选中
+    const allSelected =
+      availableData.length > 0 &&
+      availableData.every((item) =>
+        selected.some((selectedItem) => selectedItem.value === item.value)
+      )
+
     return (
-      <div className='gm-more-select-popup-input'>
-        <Input
-          ref={this._inputRef}
-          autoFocus
-          value={searchValue}
-          onChange={this._handleChange}
-          placeholder={searchPlaceholder}
-        />
-      </div>
+      <Flex
+        justifyBetween
+        className='tw-p-[8px] gm-more-select-default-bottom'
+        alignCenter
+      >
+        {isShowCheckedAll && (
+          <Checkbox
+            checked={allSelected}
+            onChange={(e) => {
+              const isChecked = e.target.checked
+              this.setState({
+                isCheckedAll: isChecked,
+              })
+
+              if (isChecked) {
+                // 全选当前过滤后的可用数据
+                const valuesToSelect = availableData.map((item) => item.value)
+                const prevSelectedValue = selected.map((item) => item.value)
+                // console.log(valuesToSelect, selected)
+                const newSelected = Array.from(
+                  new Set([...prevSelectedValue, ...valuesToSelect])
+                )
+                this._handleSelect(newSelected)
+              } else {
+                // 取消全选 - 只反勾选availableData的数据
+                const { selected = [] } = this.props
+                const availableValues = availableData.map((item) => item.value)
+                const newSelected = selected.filter(
+                  (item) => !availableValues.includes(item.value)
+                )
+                this._handleSelect(newSelected.map((item) => item.value))
+              }
+            }}
+          >
+            全选({availableData.length})
+          </Checkbox>
+        )}
+        {isShowDeletedSwitch && (
+          <Flex alignCenter>
+            <Flex row>
+              <Switch
+                size='small'
+                style={{ width: 32 }}
+                checked={isFilterDelete}
+                onChange={(open) => {
+                  this.setState({
+                    isFilterDelete: open,
+                  })
+                  // if (isCheckedAll) {
+                  //   const newAvailableData = open
+                  //     ? flatFilterData.filter((item) => !item.deleted)
+                  //     : flatFilterData
+
+                  //   const valuesToSelect = newAvailableData.map((item) => item.value)
+                  //   this._handleSelect(valuesToSelect)
+                  // }
+                }}
+              />
+            </Flex>
+            <span className='gm-margin-left-5'>过滤已删除数据</span>
+          </Flex>
+        )}
+      </Flex>
     )
   }
 
+  renderContent = () => {
+    const { loading, willActiveIndex, isFilterDelete } = this.state
+
+    if (loading) {
+      return (
+        <Flex alignCenter justifyCenter className='gm-bg gm-padding-5'>
+          <Loading size='20px' />
+        </Flex>
+      )
+    }
+
+    let filterData = this._getFilterData()
+
+    // 如果开启了过滤已删除商品功能，需要过滤掉已删除的商品
+    if (isFilterDelete) {
+      filterData = filterData
+        .map((group) => ({
+          ...group,
+          children: group.children.filter((item) => !item.deleted),
+        }))
+        .filter((group) => group.children.length > 0)
+    }
+
+    if (!loading && filterData.length === 0) {
+      return this._renderEmpty()
+    }
+
+    if (!loading && filterData.length > 0) {
+      const {
+        selected = [],
+        multiple,
+        isGroupList,
+        renderListItem,
+        listHeight,
+      } = this.props
+
+      const selectedValues = new Set(selected?.map((v) => v.value))
+
+      // 分离已勾选和未勾选的数据
+      const availableGroups: MoreSelectGroupDataItem<V>[] = []
+      // 已选中区域直接使用 selected 构建，不受筛选影响
+      const selectedGroups: MoreSelectGroupDataItem<V>[] = []
+
+      if (multiple) {
+        filterData.forEach((group) => {
+          const availableChildren = group.children.filter(
+            (item) => !selectedValues.has(item.value)
+          )
+
+          if (availableChildren.length > 0) {
+            availableGroups.push({
+              ...group,
+              children: availableChildren,
+            })
+          }
+        })
+
+        if (selected.length > 0) {
+          selectedGroups.push({
+            label: '',
+            children: selected,
+          })
+        }
+      }
+
+      return (
+        <div style={{ height: listHeight, overflow: 'auto' }}>
+          {selected.length > 0 && multiple && (
+            <>
+              <div className='gm-more-select-section-title gm-padding-5 gm-text-desc gm-text-12'>
+                已选中
+              </div>
+              <ListBase
+                selected={selected.map((v) => v.value)}
+                data={selectedGroups}
+                multiple={multiple}
+                isGroupList={false}
+                className='gm-border-0'
+                renderItem={renderListItem}
+                onSelect={this._handleSelect}
+                isScrollTo={false}
+              />
+            </>
+          )}
+          <>
+            {multiple && (
+              <div className='gm-more-select-section-title gm-padding-5 gm-text-desc gm-text-12'>
+                未选中
+              </div>
+            )}
+
+            <ListBase
+              selected={selected?.map((v) => v.value)}
+              data={multiple ? availableGroups : filterData}
+              multiple={multiple}
+              isGroupList={isGroupList}
+              className='gm-border-0'
+              renderItem={renderListItem}
+              onSelect={this._handleSelect}
+              isScrollTo
+              willActiveIndex={willActiveIndex!}
+            />
+          </>
+        </div>
+      )
+    }
+  }
+
   private _renderList = (config: ConfigProviderProps): ReactNode => {
     const {
-      selected = [],
-      multiple,
-      isGroupList,
-      renderListItem,
+      searchPlaceholder,
       listHeight,
       popupClassName,
       renderCustomizedBottom,
-      isSameAntd = false,
+      isRenderDefaultBottom = false,
     } = this.props
-    const { loading, willActiveIndex } = this.state
-    const filterData = this._getFilterData()
+    const { loading, searchValue, willActiveIndex, isFilterDelete } = this.state
+    let filterData = this._getFilterData()
+
+    // 如果开启了过滤已删除商品功能，需要过滤掉已删除的商品
+    if (isFilterDelete) {
+      filterData = filterData
+        .map((group) => ({
+          ...group,
+          children: group.children.filter((item) => !item.deleted),
+        }))
+        .filter((group) => group.children.length > 0)
+    }
+
     return (
       <ConfigProvider {...config}>
         <div
           className={classNames('gm-more-select-popup', popupClassName)}
           onKeyDown={this._handlePopupKeyDown}
         >
-          {isSameAntd ? null : this._renderSearchInput()}
-          <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 className='gm-more-select-popup-input'>
+            <Input
+              ref={this._inputRef}
+              autoFocus
+              value={searchValue}
+              onChange={this._handleChange}
+              placeholder={searchPlaceholder}
+            />
           </div>
+          <div style={{ height: listHeight }}>{this.renderContent()}</div>
           {!loading &&
             !!filterData.length &&
-            renderCustomizedBottom &&
-            renderCustomizedBottom(this._popoverRef)}
+            (renderCustomizedBottom
+              ? renderCustomizedBottom(this._popoverRef, this.renderBottom)
+              : isRenderDefaultBottom
+              ? this.renderBottom()
+              : null)}
         </div>
       </ConfigProvider>
     )
@@ -313,16 +538,7 @@ class MoreSelectBase<V extends string | number = string> extends Component<
   }
 
   private _handlePopoverVisibleChange = (active: boolean) => {
-    if (this.props.isSameAntd) {
-      this.setState({
-        isOpen: active,
-      })
-      if (!this.props.multiple && !active) {
-        this.setState({ searchValue: undefined })
-      }
-    }
-
-    if (active && this.props.searchOnActive && !this.props.isSameAntd) {
+    if (active && this.props.searchOnActive) {
       const searchValue = localStorage.getItem('_GM-PC_MORESELECT_SEARCHVALUE')
       if (searchValue) {
         this.setState({ searchValue })
@@ -348,10 +564,93 @@ class MoreSelectBase<V extends string | number = string> extends Component<
       style,
       popoverType,
       children,
-      searchPlaceholder,
-      isSameAntd = false,
+      maxTagCount,
+      maxTagPlaceholder,
     } = this.props
-    const { searchValue } = this.state
+
+    // 处理 maxTagCount 逻辑
+    const renderSelectedItems = () => {
+      if (!multiple || !maxTagCount || selected.length === 0) {
+        return 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>
+        ))
+      }
+
+      // 处理 maxTagCount 逻辑
+      const isResponsive = maxTagCount === 'responsive'
+      let displayCount: number
+
+      if (isResponsive) {
+        displayCount = this.state.displayCount
+      } else {
+        displayCount = maxTagCount as number
+      }
+
+      const itemsToShow = selected.slice(0, displayCount)
+      const omittedItems = selected.slice(displayCount)
+      const omittedCount = selected.length - displayCount
+
+      return (
+        <>
+          {itemsToShow.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>
+              <SVGRemove
+                className='gm-cursor gm-more-select-clear-btn'
+                onClick={disabled ? _.noop : this._handleClear.bind(this, item)}
+              />
+            </Flex>
+          ))}
+          {omittedCount > 0 && (
+            <Flex
+              key='omitted'
+              className='gm-more-select-selected-item gm-more-select-omitted-item'
+            >
+              {maxTagPlaceholder ? (
+                maxTagPlaceholder(omittedItems, omittedCount)
+              ) : (
+                <span className='gm-more-select-omitted-count'>+{omittedCount}...</span>
+              )}
+            </Flex>
+          )}
+          <SVGRemove
+            className='gm-cursor gm-more-select-clear-btn'
+            onClick={disabled ? _.noop : this._handleClearAll}
+          />
+        </>
+      )
+    }
 
     return (
       <ConfigConsumer>
@@ -367,15 +666,13 @@ class MoreSelectBase<V extends string | number = string> extends Component<
               },
               className
             )}
-            style={style}
+            style={style as any}
           >
             <Popover
               ref={this._popoverRef}
               type={popoverType}
               popup={() => this._renderList(config)}
-              disabled={
-                disabled || (!isSameAntd ? false : this.state.searchValue === undefined)
-              }
+              disabled={disabled}
               isInPopup={isInPopup}
               onVisibleChange={this._handlePopoverVisibleChange}
             >
@@ -384,78 +681,13 @@ class MoreSelectBase<V extends string | number = string> extends Component<
                   ref={this._selectionRef}
                   tabIndex={0}
                   wrap
-                  className={classNames({
-                    'gm-more-select-selected': true,
-                    'gm-more-select-selected-antd': isSameAntd,
-                  })}
+                  className='gm-more-select-selected'
                 >
                   {selected.length !== 0 ? (
-                    selected.map((item) => (
-                      <Flex
-                        key={item.value as any}
-                        className='gm-more-select-selected-item'
-                        alignCenter
-                      >
-                        <Popover
-                          disabled={!this.props.isKeyboard}
-                          type='hover'
-                          popup={<div className='gm-padding-10'>{item.text}</div>}
-                        >
-                          <Flex flex column>
-                            {isSameAntd ? (
-                              <div className='gm-more-select-popup-input'>
-                                <Input
-                                  ref={this._inputRef}
-                                  value={
-                                    !this.state.isOpen
-                                      ? renderSelected!(item)
-                                      : searchValue
-                                  }
-                                  onChange={this._handleChange}
-                                  placeholder={searchPlaceholder}
-                                  className='gm-more-select-popup-input-no-border'
-                                />
-                              </div>
-                            ) : (
-                              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>
-                    ))
+                    renderSelectedItems()
                   ) : (
                     // 加多个 &nbsp; 避免对齐问题，有文本才有对齐
-                    <>
-                      {isSameAntd ? (
-                        <Input
-                          ref={this._inputRef}
-                          value={searchValue}
-                          onChange={this._handleChange}
-                          placeholder={searchPlaceholder}
-                          className='gm-more-select-popup-input-no-border'
-                        />
-                      ) : (
-                        <div className='gm-text-placeholder'>{placeholder}&nbsp; </div>
-                      )}
-                    </>
-                    //
+                    <div className='gm-text-placeholder'>{placeholder}&nbsp; </div>
                   )}
                 </Flex>
               )}

package/src/component/more_select/more_select.tsx

@@ -8,10 +8,16 @@ class MoreSelect<V = any> extends Component<MoreSelectProps<V>> {
     renderSelected: (item: MoreSelectDataItem<any>) => item.text,
     renderListItem: (item: MoreSelectDataItem<any>) => item.text,
     delay: 500,
-    listHeight: '180px',
+    listHeight: '280px',
     renderListFilterType: 'default',
     popoverType: 'focus',
     onKeyDown: _.noop,
+    /** 是否展示全选以及过滤已删除商品 */
+    isRenderDefaultBottom: false,
+    /** 是否展示已删除商品 */
+    isShowDeletedSwitch: true,
+    /** 是否展示全选 */
+    isShowCheckedAll: true,
   }
 
   private _moreSelectBaseRef = createRef<MoreSelectBase>()
@@ -85,6 +91,8 @@ class MoreSelect<V = any> extends Component<MoreSelectProps<V>> {
       onSearch,
       onClick,
       renderListFilter,
+      maxTagCount,
+      maxTagPlaceholder,
       ...rest
     } = this.props
     let tempSelect = selected as MoreSelectDataItem<V>[]
@@ -129,6 +137,8 @@ class MoreSelect<V = any> extends Component<MoreSelectProps<V>> {
         isGroupList={isGroupList}
         onSearch={onSearch && this._handleSearch}
         renderListFilter={renderListFilter && this._renderListFilter}
+        maxTagCount={maxTagCount}
+        maxTagPlaceholder={maxTagPlaceholder}
       />
     )
   }

package/src/component/more_select/stories.tsx

@@ -318,6 +318,98 @@ export const ComMoreSelectWithIsGroupListMultiple = () => (
   />
 )
 
+export const ComMoreSelectWithMaxTagCount = () => {
+  // 创建一个包含多个选项的数据集
+  const manyOptions = [
+    { value: 1, text: '选项1' },
+    { value: 2, text: '选项2' },
+    { value: 3, text: '选项3' },
+    { value: 4, text: '选项4' },
+    { value: 5, text: '选项5' },
+    { value: 6, text: '选项6' },
+    { value: 7, text: '选项7' },
+    { value: 8, text: '选项8' },
+  ]
+
+  // 预选多个选项
+  const preSelected = manyOptions.slice(0, 6)
+
+  return (
+    <div style={{ width: '300px' }}>
+      <h3>maxTagCount 示例</h3>
+
+      <div style={{ marginBottom: '20px' }}>
+        <h4>不使用 maxTagCount（显示所有选项）</h4>
+        <MoreSelect<number>
+          multiple
+          data={manyOptions}
+          selected={preSelected}
+          onSelect={(selected) => {
+            console.log('不限制显示数量:', selected)
+          }}
+        />
+      </div>
+
+      <div style={{ marginBottom: '20px' }}>
+        <h4>maxTagCount={2}（最多显示2个选项）</h4>
+        <MoreSelect<number>
+          multiple
+          maxTagCount={2}
+          data={manyOptions}
+          selected={preSelected}
+          onSelect={(selected) => {
+            console.log('最多显示2个:', selected)
+          }}
+        />
+      </div>
+
+      <div style={{ marginBottom: '20px' }}>
+        <h4>maxTagCount={3}（最多显示3个选项）</h4>
+        <MoreSelect<number>
+          multiple
+          maxTagCount={3}
+          data={manyOptions}
+          selected={preSelected}
+          onSelect={(selected) => {
+            console.log('最多显示3个:', selected)
+          }}
+        />
+      </div>
+
+      <div style={{ marginBottom: '20px' }}>
+        <h4>maxTagCount=responsive（响应式模式）</h4>
+        <MoreSelect<number>
+          multiple
+          maxTagCount='responsive'
+          data={manyOptions}
+          selected={preSelected}
+          onSelect={(selected) => {
+            console.log('响应式模式:', selected)
+          }}
+        />
+      </div>
+
+      <div style={{ marginBottom: '20px' }}>
+        <h4>自定义 maxTagPlaceholder</h4>
+        <MoreSelect<number>
+          multiple
+          maxTagCount={2}
+          maxTagPlaceholder={(omittedValues, omittedCount) => (
+            <span style={{ color: '#1890ff', fontWeight: 'bold' }}>
+              还有{omittedCount}项未显示
+            </span>
+          )}
+          data={manyOptions}
+          selected={preSelected}
+          onSelect={(selected) => {
+            console.log('自定义占位符:', selected)
+          }}
+        />
+      </div>
+    </div>
+  )
+}
+
 export default {
   title: '表单/MoreSelect',
 }

package/src/component/more_select/style.less

@@ -14,15 +14,10 @@
     }
   }
 
-  .gm-more-select-selected-antd {
-    padding: 0 12px;
-  }
-
   .gm-more-select-clear-btn {
     position: absolute;
-    right: 4px;
-    top: 50%;
-    transform: translateY(-50%);
+    right: 5px;
+    top: 7px;
     cursor: pointer;
     color: var(--gm-color-desc);
   }
@@ -76,9 +71,6 @@
   }
 }
 
-.gm-more-select-popup-input-no-border {
-  border: none !important;
-  border-radius: 0 !important;
-  padding: 0 !important;
-  box-shadow: none !important;
+.gm-more-select-default-bottom {
+  border-top: 1px solid var(--gm-color-border);
 }

package/src/component/more_select/types.ts

@@ -1,11 +1,13 @@
-import { Popover } from '@gm-pc/react'
 import { CSSProperties, ReactNode, KeyboardEvent } from 'react'
+import { Popover } from '../popover'
 
 /** 普通的数据格式 */
 interface MoreSelectDataItem<V extends string | number = string> {
   value: V
   text: string
   disabled?: boolean
+  /** 是否已删除 */
+  deleted?: boolean
   [key: string]: any
 }
 
@@ -36,10 +38,13 @@ interface MoreSelectCommonProps<V extends string | number = string> {
   renderListItem?(value: MoreSelectDataItem<V>, index: number): ReactNode
 
   /** 自定义popup底部渲染 */
-  renderCustomizedBottom?(ref: React.RefObject<Popover>): ReactNode
+  renderCustomizedBottom?(
+    ref: React.RefObject<Popover>,
+    defaultBottom: () => ReactNode
+  ): ReactNode
 
   /**
-   * 自定义“空状态”渲染
+   * 自定义"空状态"渲染
    *
    * 若函数返回 undefined 则使用默认的空状态
    */
@@ -60,6 +65,25 @@ interface MoreSelectCommonProps<V extends string | number = string> {
   /** 目前为了 keyboard */
   isKeyboard?: boolean
   onKeyDown?(event: KeyboardEvent): void
+
+  /** 最多显示的选中项数量，超出部分会折叠 */
+  maxTagCount?: number | 'responsive'
+  /** 自定义超出 maxTagCount 时显示的内容 */
+  maxTagPlaceholder?: (
+    omittedValues: MoreSelectDataItem<V>[],
+    omittedCount: number
+  ) => ReactNode
+
+  /** 是否展示全选以及过滤已删除商品 */
+  isRenderDefaultBottom?: boolean
+  /** 是否展示已删除商品 */
+  isShowDeletedSwitch?: boolean
+  /** 是否展示全选 */
+  isShowCheckedAll?: boolean
+  /** 当设置 maxTagCount 的时候的宽度, 根据这个去计算显示内容 */
+  tagItemWidth?: number
+  /** +N 显示的宽度 */
+  omittedTagWidth?: number
 }
 
 interface MoreSelectBaseProps<V extends string | number = string>
@@ -69,7 +93,7 @@ interface MoreSelectBaseProps<V extends string | number = string>
   onSelect(selected: MoreSelectDataItem<V>[]): void
 
   /** 搜索回调 */
-  onSearch?(searchWord: string, data: MoreSelectGroupDataItem<V>[]): Promise<void> | void
+  onSearch?(searchWord: string, data: MoreSelectGroupDataItem<V>[]): Promise<any> | any
   /** 点击回调 */
   onClick?(selected: MoreSelectSelected<V>[]): void
 
@@ -80,8 +104,12 @@ interface MoreSelectBaseProps<V extends string | number = string>
   ): MoreSelectGroupDataItem<V>[]
   /** 是否在active的时候搜索，订单业务相关，searchValue放在localstorage */
   searchOnActive?: boolean
-  /** 是否用select */
-  isSameAntd?: boolean
+  /** 是否展示全选以及过滤已删除商品 */
+  isRenderDefaultBottom?: boolean
+  /** 是否展示已删除商品 */
+  isShowDeletedSwitch?: boolean
+  /** 是否展示全选 */
+  isShowCheckedAll?: boolean
 }
 
 type MoreSelectData<V extends string | number = string> =
@@ -100,7 +128,7 @@ interface MoreSelectProps<V extends string | number = string>
   onSelect?(selected?: MoreSelectSelected<V>): void
   onChange?(value: V | V[]): void
   /** 搜索回调 */
-  onSearch?(searchWord: string, data: MoreSelectData<V>): Promise<void> | void
+  onSearch?(searchWord: string, data: MoreSelectData<V>): Promise<void | any> | any
   /** 点击回调 */
   onClick?(selected: MoreSelectSelected<V>[]): void
 

package/src/component/pagination/left.tsx

@@ -6,13 +6,17 @@ import _ from 'lodash'
 import { getLocale } from '@gm-pc/locales'
 
 function getLimitData(limit: number, pageSizeOptions?: string[]) {
-  const limitData = [
-    { value: limit, text: limit + '' },
-    { value: 10, text: '10' },
-    { value: 20, text: '20' },
-    { value: 50, text: '50' },
-    ...(pageSizeOptions?.map((v) => ({ value: Number(v), text: v })) || []),
-  ]
+  let limitData = []
+  if (pageSizeOptions) {
+    limitData = pageSizeOptions.map((v) => ({ value: Number(v), text: v }))
+  } else {
+    limitData = [
+      { value: limit, text: limit + '' },
+      { value: 10, text: '10' },
+      { value: 20, text: '20' },
+      { value: 50, text: '50' },
+    ]
+  }
 
   return _.orderBy(
     _.uniqBy(limitData, (v) => v.value),

package/src/component/switch/style.less

@@ -6,6 +6,10 @@
   border-radius: calc(var(--gm-switch-size-height) / 2);
   background-color: var(--gm-color-bg-switch);
 
+  &.gm-switch-small {
+    --gm-switch-size-height: 16px;
+  }
+
   &::before {
     position: absolute;
     content: '';

package/src/component/switch/switch.tsx

@@ -11,6 +11,7 @@ interface SwitchProps {
   onChange?(checked: boolean): void
   className?: string
   style?: CSSProperties
+  size?: 'small' | 'middle'
 }
 
 interface SwitchState {
@@ -26,10 +27,11 @@ class Switch extends Component<SwitchProps, SwitchState> {
     on: '',
     off: '',
     onChange: _.noop,
+    size: 'middle',
   }
 
   readonly state: SwitchState = {
-    checked: this.props.checked,
+    checked: !!this.props.checked,
     labelWidth: null,
     isReady: false,
   }
@@ -53,7 +55,7 @@ class Switch extends Component<SwitchProps, SwitchState> {
   UNSAFE_componentWillReceiveProps(nextProps: Readonly<SwitchProps>) {
     if ('checked' in nextProps) {
       this.setState({
-        checked: nextProps.checked,
+        checked: !!nextProps.checked,
       })
     }
   }
@@ -82,6 +84,7 @@ class Switch extends Component<SwitchProps, SwitchState> {
       disabled,
       on,
       off,
+      size,
       ...rest
     } = this.props
 
@@ -101,8 +104,9 @@ class Switch extends Component<SwitchProps, SwitchState> {
           ref={this._inputOffRef}
           className={classNames('gm-switch gm-switch-' + type, className, {
             disabled,
+            [`gm-switch-${size}`]: size,
           })}
-          style={style}
+          style={style as any}
           data-attr={this.state.labelWidth}
           disabled={disabled}
           type='checkbox'