From ec108c7964ff02f66021a1ca7ffa2b0cc6fa15dd Mon Sep 17 00:00:00 2001
From: GongFlying <150640661+gzcqqqqqqqq1@users.noreply.github.com>
Date: Tue, 28 Apr 2026 17:36:01 +0800
Subject: [PATCH 1/2] update base ui

---
 src/AsyncUserSelect/index.css                 | 63 +++++++++++++---
 src/AsyncUserSelect/index.js                  | 41 +++++++----
 src/DTableCustomizeSelect/index.css           | 29 ++++++--
 .../utils/filter-item-utils.js                |  4 +-
 .../widgets/collaborator-filter/index.js      |  2 +-
 .../widgets/filter-list/index.css             |  4 +-
 src/DTableGroupSelect/index.css               | 73 +++++++++++++++++--
 src/DTableGroupSelect/index.js                |  2 +-
 src/DTableGroupSelect/select-option-group.css | 25 +++----
 src/DTableGroupSelect/select-option-group.js  | 21 +++++-
 src/DTableSelect/index.js                     | 10 +--
 src/DTableSelect/utils.js                     | 62 ++++++++++++++--
 src/SelectOptionGroup/index.css               | 36 ++++++---
 src/SelectOptionGroup/index.js                | 41 +++++++++--
 14 files changed, 322 insertions(+), 91 deletions(-)

diff --git a/src/AsyncUserSelect/index.css b/src/AsyncUserSelect/index.css
index 997109e4..46bd8a54 100644
--- a/src/AsyncUserSelect/index.css
+++ b/src/AsyncUserSelect/index.css
@@ -3,6 +3,7 @@
   height: auto !important;
   min-height: 38px;
   max-width: calc(100% - 10px);
+  padding: 0.4375rem 1rem 0.4375rem 0.5rem;
 }
 
 .dtable-ui-selected-users-container .dtable-ui-user-select-placeholder {
@@ -12,40 +13,57 @@
 .dtable-ui-user-select-popover .popover {
   width: 385px;
   max-width: 385px;
+  border-radius: 4px;
+  fill: #FFFFFF 100%;
+  background-color: #FFFFFF;
+  border: 1px solid #EEEEEE;
+  border-radius: 4px;
+  box-shadow: 0px 6px 14px rgba(0, 0, 0, 0.1);
 }
 
 .dtable-ui-user-select-container {
   position: relative;
 }
 
-.dtable-ui-user-select-container .dtable-ui-user-search-container {
-  padding: 10px 10px 0 10px;
-}
-
 .dtable-ui-user-select-container .dtable-ui-user-search-container input {
-  height: 28px;
+  height: 32px;
 }
 
 .dtable-ui-user-select-container .dtable-ui-user-list-container {
   min-height: 160px;
   max-height: 200px;
-  margin: 10px 0;
+  padding: 8px !important;
   overflow: auto;
+  position: relative;
+}
+
+.dtable-ui-user-select-container .form-control {
+  border: none;
+  border-bottom: 1px solid rgb(0 40 100 / 12%) !important;
+  border-radius: 4px 4px 0 0;
+  padding: .375rem 1rem !important;
+}
+
+.dtable-ui-user-select-container .form-control:focus {
+  border-color: transparent !important;
+  border-bottom: 1px solid rgb(0 40 100 / 12%) !important;
+  box-shadow: none !important;
 }
 
 .dtable-ui-user-select-container .dtable-ui-user-list-container .dtable-ui-user-item-container {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  height: 30px;
-  padding: 0 10px;
+  height: 32px;
+  padding: 0 8px;
   font-size: 14px;
   cursor: pointer;
+  border-radius: 4px;
 }
 
 .dtable-ui-user-select-container .dtable-ui-user-list-container .dtable-ui-user-item-container:hover,
 .dtable-ui-user-select-container .dtable-ui-user-list-container .dtable-ui-user-item-container-highlight {
-  background: #f5f5f5;
+  background-color: rgba(0, 0, 0, 0.04);
   cursor: pointer;
 }
 
@@ -61,16 +79,33 @@
   background: transparent;
 }
 
-.dtable-ui-user-list-container .dtable-ui-collaborator-check-icon .dtable-icon-check-mark {
-  color: #798d99;
+.dtable-ui-user-list-container .dtable-ui-collaborator-check-icon .dtable-icon-check {
+  color: #666666;
+  font-size: 14px;
+}
+
+.dtable-ui-user-select-container .dtable-ui-user-search-container .search-clear-btn {
+  position: absolute;
+  top: 5px;
+  right: 10px;
+  height: 22px;
+  line-height: 22px;
+  width: 28px;
+  text-align: center;
+  color: #999;
+  cursor: pointer;
+}
+
+.dtable-ui-user-select-container .dtable-ui-user-search-container .search-clear-btn .dtable-icon-x {
   font-size: 12px;
+  color: #999999;
 }
 
 /* user-item */
 .dtable-ui-user-item {
   display: inline-flex;
   align-items: center;
-  margin: 2px 10px 2px 0;
+  margin: 2px 4px 2px 0;
   padding: 0 8px 0 2px;
   height: 20px;
   font-size: 13px;
@@ -120,3 +155,7 @@
   color: #666666;
   cursor: pointer;
 }
+
+.dtable-ui-selected-users-container .dtable-ui-users-input {
+  padding-right: 37px;
+}
diff --git a/src/AsyncUserSelect/index.js b/src/AsyncUserSelect/index.js
index 989b9ba4..d8f46346 100644
--- a/src/AsyncUserSelect/index.js
+++ b/src/AsyncUserSelect/index.js
@@ -191,20 +191,22 @@ const AsyncUserSelect = ({ className, emptyPlaceholder = '', searchPlaceholder =
     <ClickOutside onClickOutside={onClickOutside}>
       <>
         <div className={classnames('dtable-ui-selected-users-container form-control d-flex align-items-center', className, { 'focus': isPopoverOpen })} onClick={onTogglePopover} ref={selectorRef}>
-          {selectedUsers.map((user, index) => {
-            return (
-              <UserItem
-                key={`dtable-ui-user-selector-selected-user-${index}`}
-                user={user}
-                deleteUser={deselectUser}
-              />
-            );
-          })}
-          {selectedUsers.length === 0 && (
-            <div className="dtable-ui-user-select-placeholder">
-              {emptyPlaceholder || getLocale('Search_users')}
-            </div>
-          )}
+          <div className='dtable-ui-users-input'>
+            {selectedUsers.map((user, index) => {
+              return (
+                <UserItem
+                  key={`dtable-ui-user-selector-selected-user-${index}`}
+                  user={user}
+                  deleteUser={deselectUser}
+                />
+              );
+            })}
+            {selectedUsers.length === 0 && (
+              <div className="dtable-ui-user-select-placeholder">
+                {emptyPlaceholder || getLocale('Search_users')}
+              </div>
+            )}
+          </div>
         </div>
         {selectorRef.current && (
           <Popover
@@ -225,6 +227,15 @@ const AsyncUserSelect = ({ className, emptyPlaceholder = '', searchPlaceholder =
                   onChange={onSearchValueChanged}
                   onKeyDown={onKeyDown}
                 />
+                {searchValue && (
+                  <div
+                    className="search-clear-btn position-absolute"
+                    onClick={() => onSearchValueChanged('')}
+                    title={getLocale('Clear_search_text')}
+                  >
+                    <i aria-hidden="true" className="dtable-font dtable-icon-x"></i>
+                  </div>
+                )}
               </div>
               <div className="dtable-ui-user-list-container" ref={userListContainerRef}>
                 {searchedUsers.length > 0 && (
@@ -239,7 +250,7 @@ const AsyncUserSelect = ({ className, emptyPlaceholder = '', searchPlaceholder =
                         <UserItem key={`dtable-ui-user-selector-searched-user-${index}`} user={user} enableShowIDInOrgWhenSearchUser={enableShowIDInOrgWhenSearchUser} />
                         {selectedUsers.find(u => u.email === user.email) && (
                           <div className='dtable-ui-collaborator-check-icon'>
-                            <i className="dtable-font dtable-icon-check-mark" aria-hidden="true"></i>
+                            <i className="dtable-font dtable-icon-check" aria-hidden="true"></i>
                           </div>
                         )}
                       </div>
diff --git a/src/DTableCustomizeSelect/index.css b/src/DTableCustomizeSelect/index.css
index c425303e..bd68e391 100644
--- a/src/DTableCustomizeSelect/index.css
+++ b/src/DTableCustomizeSelect/index.css
@@ -4,7 +4,7 @@
 
 .dtable-select.custom-select {
   display: flex;
-  padding: 0 10px;
+  padding: 0 16px;
   border-radius: 3px;
   align-items: center;
   justify-content: space-between;
@@ -39,14 +39,10 @@
 .dtable-select .dtable-icon-down3 {
   display: inline-block;
   font-size: 12px;
-  color: #999;
+  color: #666666;
   transition: all 0.1s;
 }
 
-.dtable-select .dtable-icon-down3:hover {
-  color: #555;
-}
-
 .dtable-select .selected-option {
   display: flex;
   flex: 1;
@@ -98,3 +94,24 @@
   font-size: 14px;
   white-space: nowrap;
 }
+
+.option-group .option-group-selector-multiple-select .option-group-search,
+.option-group .option-group-selector-single-select .option-group-search {
+  padding: 0 0 8px 0 !important;
+}
+
+.option-group-selector-multiple-select .form-control,
+.option-group-selector-single-select .form-control {
+  border: none;
+  border-bottom: 1px solid rgb(0 40 100 / 12%) !important;
+  border-radius: 4px 4px 0 0;
+  padding: .375rem .5rem !important;
+  height: 32px;
+}
+
+.option-group-selector-multiple-select .form-control:focus,
+.option-group-selector-single-select .form-control:focus {
+  border-color: transparent !important;
+  border-bottom: 1px solid rgb(0 40 100 / 12%) !important;
+  box-shadow: none !important;
+}
diff --git a/src/DTableFiltersPopover/utils/filter-item-utils.js b/src/DTableFiltersPopover/utils/filter-item-utils.js
index 3f7c3fe0..42a7316e 100644
--- a/src/DTableFiltersPopover/utils/filter-item-utils.js
+++ b/src/DTableFiltersPopover/utils/filter-item-utils.js
@@ -72,7 +72,7 @@ class FilterItemUtils {
         <div className='select-option-name single-select-option-name'>
           <div className="single-select-option" style={{ background: option.color, color: option.textColor || null }} title={option.name} aria-label={option.name}>{option.name}</div>
           <div className='single-select-check-icon'>
-            {selectedOption?.id === option.id && <i className="option-edit dtable-font dtable-icon-check-mark"></i>}
+            {selectedOption?.id === option.id && <i className="option-edit dtable-font dtable-icon-check"></i>}
           </div>
         </div>
       )
@@ -86,7 +86,7 @@ class FilterItemUtils {
         <div className='select-option-name multiple-option-name'>
           <div className="multiple-select-option" style={{ background: option.color, color: option.textColor }} title={option.name} aria-label={option.name}>{option.name}</div>
           <div className='multiple-check-icon'>
-            {filterTerm.indexOf(option.id) > -1 && <i className="option-edit dtable-font dtable-icon-check-mark"></i>}
+            {filterTerm.indexOf(option.id) > -1 && <i className="option-edit dtable-font dtable-icon-check"></i>}
           </div>
         </div>
       )
diff --git a/src/DTableFiltersPopover/widgets/collaborator-filter/index.js b/src/DTableFiltersPopover/widgets/collaborator-filter/index.js
index d9efc883..f84ab1c8 100644
--- a/src/DTableFiltersPopover/widgets/collaborator-filter/index.js
+++ b/src/DTableFiltersPopover/widgets/collaborator-filter/index.js
@@ -51,7 +51,7 @@ class CollaboratorFilter extends Component {
                 </div>
               </div>
               <div className='collaborator-check-icon'>
-                {isSelected && <i className="option-edit dtable-font dtable-icon-check-mark"></i>}
+                {isSelected && <i className="option-edit dtable-font dtable-icon-check"></i>}
               </div>
             </div>
           </Fragment>
diff --git a/src/DTableFiltersPopover/widgets/filter-list/index.css b/src/DTableFiltersPopover/widgets/filter-list/index.css
index 0b076a0c..39412c41 100644
--- a/src/DTableFiltersPopover/widgets/filter-list/index.css
+++ b/src/DTableFiltersPopover/widgets/filter-list/index.css
@@ -205,7 +205,7 @@
 .option-group-dtable-ui-collaborator-selector .option:hover,
 .option-group-dtable-ui-collaborator-selector .option.option-active {
   color: #212529;
-  background-color: #f7f7f7;
+  background-color: #f5f5f5;
 }
 
 .dtable-ui-filters-list .dtable-ui-multiple-select-selector .option.option-active .select-option-name,
@@ -333,7 +333,7 @@
   display: inline-flex;
   align-items: center;
   height: 20px;
-  margin-right: 10px;
+  margin-right: 4px;
   padding: 0 8px 0 2px;
   font-size: 13px;
   border-radius: 10px;
diff --git a/src/DTableGroupSelect/index.css b/src/DTableGroupSelect/index.css
index 142f671c..ab1667eb 100644
--- a/src/DTableGroupSelect/index.css
+++ b/src/DTableGroupSelect/index.css
@@ -4,7 +4,7 @@
 
 .group-select.custom-select {
   display: flex;
-  padding: 5px 10px;
+  padding: 7px 8px !important;
   border-radius: 3px;
   align-items: center;
   justify-content: space-between;
@@ -79,18 +79,81 @@
 }
 
 .group-select .selected-option-show .selected-option-item {
-  background-color: rgb(240, 240, 240);
-  border-radius: 16px;
+  background-color: #F7F7F5;
+  border-radius: 4px !important;
   display: flex;
   align-items: center;
+  height: 24px;
 }
 
 .group-select .selected-option-show .selected-option-item .selected-option-item-name {
-  font-size: 13px;
+  font-size: 14px !important;
   color: #212529;
+  margin-left: 6px;
+  margin-right: 8px
 }
 
 .group-select .selected-option-show .selected-option-item .dtable-icon-x {
   cursor: pointer;
-  color: rgb(103, 103, 103);
+  color: #666666;
+  font-size: 12px;
+  margin-right: 6px;
+}
+
+.seatable-group-select .option-group-search {
+  padding: 0 !important;
+}
+
+.seatable-group-select .form-control {
+  border: none;
+  border-bottom: 1px solid rgb(0 40 100 / 12%) !important;
+  border-radius: 4px 4px 0 0;
+  padding: .375rem 1rem !important;
+  height: 32px;
+}
+
+.seatable-group-select .form-control:focus {
+  border-color: transparent !important;
+  border-bottom: 1px solid rgb(0 40 100 / 12%) !important;
+  box-shadow: none !important;
+}
+
+.option-group-content .dtable-icon-check {
+  color: #666666;
+  font-size: 14px;
+  margin-left: 16px;
+}
+
+.option-group-content .label-check-icon {
+  width: 30px;
+}
+
+.seatable-group-select .clear-search-text {
+  position: absolute;
+  display: inline-block;
+  height: 12px;
+  width: 12px;
+  line-height: 12px;
+  top: 10px !important;
+  right: 18px;
+}
+
+.seatable-group-select .seatable-icon-btn:not(.disabled):hover {
+  background-color:#FFFFFF;
+}
+
+.option-group-dtable-filter-select-column .seatable-icon-btn {
+  height: 12px !important;
+  width: 12px !important;
+  font-size: 12px !important;
+}
+
+.option-group-dtable-filter-select-column .clear-search-text {
+  position: absolute;
+  display: inline-block;
+  height: 12px;
+  width: 12px;
+  line-height: 12px;
+  top: 12px;
+  right: 18px;
 }
diff --git a/src/DTableGroupSelect/index.js b/src/DTableGroupSelect/index.js
index 03437265..6f31aeee 100644
--- a/src/DTableGroupSelect/index.js
+++ b/src/DTableGroupSelect/index.js
@@ -75,7 +75,7 @@ class DTableGroupSelect extends Component {
           {selectedOptions.length > 0 ?
             <span className="selected-option-show">
               {selectedOptions.map(item =>
-                <span key={item.id} className="selected-option-item mr-1 pr-1 pl-2">
+                <span key={item.id} className="selected-option-item">
                   <span className='selected-option-item-name'>{item.name}</span>
                   <i className="dtable-font dtable-icon-x ml-1" onClick={() => { this.props.onDeleteOption(item); }}></i>
                 </span>
diff --git a/src/DTableGroupSelect/select-option-group.css b/src/DTableGroupSelect/select-option-group.css
index 90f53cc9..555b279e 100644
--- a/src/DTableGroupSelect/select-option-group.css
+++ b/src/DTableGroupSelect/select-option-group.css
@@ -2,7 +2,6 @@
   display: block;
   width: 100%;
   line-height: 24px;
-  padding: 6px 10px;
   clear: both;
   font-weight: 400;
   text-align: inherit;
@@ -14,26 +13,26 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
+  padding: 0.25rem 8px;
 }
 
-.group-selector .option .dtable-icon-check-mark {
-  font-size: 12px;
-  color: #798d99;
+.group-selector .option .dtable-icon-check{
+  font-size: 14px;
+  color: #666666;
+  height: 14px !important;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 
 .group-selector .option.option-active {
-  background-color: #20a0ff;
-  color: #fff;
+  background-color: #f5f5f5;
+  color: #212529;
   cursor: pointer;
 }
 
-.group-selector .option.option-active .dtable-icon-check-mark,
-.group-selector .option.option-active .select-option-name {
-  color: #fff !important;
-}
-
-.group-selector .option .select-option-name .single-select-option {
-  margin: 0 0 0 12px;
+.group-selector .option.option-active .dtable-icon-check-mark {
+  color: #666666 !important;
 }
 
 .group-selector .option .select-option-name .multiple-select-option {
diff --git a/src/DTableGroupSelect/select-option-group.js b/src/DTableGroupSelect/select-option-group.js
index 2fd83a94..3dd85ec3 100644
--- a/src/DTableGroupSelect/select-option-group.js
+++ b/src/DTableGroupSelect/select-option-group.js
@@ -4,6 +4,8 @@ import classnames from 'classnames';
 import DTableSearchInput from '../DTableSearchInput';
 import Option from './option';
 import KeyCodes from '../SelectOptionGroup/KeyCodes';
+import IconButton from '../IconButton';
+import { getLocale } from '../lang';
 
 import './select-option-group.css';
 
@@ -153,7 +155,7 @@ class SelectOptionGroup extends Component {
           disableHover={this.state.disableHover}
         >
           <div className='option-label text-truncate' title={option.label}>{option.label}</div>
-          {isSelected && <i className="dtable-font dtable-icon-check-mark"></i>}
+          {isSelected && <i className="dtable-font dtable-icon-check"></i>}
         </Option>
       );
     });
@@ -170,24 +172,35 @@ class SelectOptionGroup extends Component {
       style = {
         position: 'fixed',
         left: position.x,
-        top: position.y + position.height,
+        top: position.y + position.height + 4,
         minWidth: position.width,
         opacity: 0,
       };
     }
     return (
       <div
-        className={classnames('option-group group-selector', className ? 'option-group-' + className : '')}
+        className={classnames('option-group group-selector seatable-group-select', className ? 'option-group-' + className : '')}
         ref={(ref) => this.optionGroupRef = ref}
         style={style}
         onMouseDown={this.onMouseDown}
       >
-        <div className="option-group-search position-relative">
+        <div className="position-relative">
           <DTableSearchInput
             className="option-search-control"
             placeholder={searchPlaceholder}
             onChange={this.onChangeSearch}
             ref={this.searchInputRef}
+            isClearable={true}
+            clearValue={this.clearValue}
+            components={{
+              ClearIndicator: (props) => {
+                return (
+                  <span className="clear-search-text" onClick={props.clearValue} title={getLocale('Clear_search_text')} aria-label={getLocale('Clear_search_text')}>
+                    <IconButton icon="x" />
+                  </span>
+                );
+              },
+            }}
           />
         </div>
         <div className="option-group-content" ref={(ref) => this.optionGroupContentRef = ref}>
diff --git a/src/DTableSelect/index.js b/src/DTableSelect/index.js
index 357b439e..e15e3041 100644
--- a/src/DTableSelect/index.js
+++ b/src/DTableSelect/index.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import Select from 'react-select';
-import { MenuSelectStyle, DropdownIndicator, ClearIndicator, MenuList, Option } from './utils';
+import { MenuSelectStyle, DropdownIndicator, ClearIndicator, MenuList, Option, processOptionsWithClear, createHandleChange } from './utils';
 
 export default class DTableSelect extends React.Component {
 
@@ -44,19 +44,19 @@ export default class DTableSelect extends React.Component {
   render() {
     const { options, onChange, value, isSearchable, placeholder, isMulti, menuPosition, isClearable, noOptionsMessage,
       classNamePrefix, style, innerRef, isDisabled, form, customFilterOption, autoFocus, className } = this.props;
+    const processedOptions = processOptionsWithClear(options, isClearable);
     return (
       <Select
         value={value}
-        onChange={onChange}
-        options={options}
+        onChange={createHandleChange(onChange)}
+        options={processedOptions}
         isMulti={isMulti}
         className={className}
         classNamePrefix={classNamePrefix}
         styles={style || MenuSelectStyle}
-        components={{ Option, DropdownIndicator, MenuList, ClearIndicator }}
+        components={{ Option, DropdownIndicator, MenuList }}
         placeholder={placeholder}
         isSearchable={isSearchable}
-        isClearable={isClearable}
         menuPosition={menuPosition || 'fixed'} // when use default menuPosition(absolute), menuPortalTarget is unnecessary.
         menuShouldScrollIntoView
         menuPortalTarget={document.querySelector(this.props.menuPortalTarget)}
diff --git a/src/DTableSelect/utils.js b/src/DTableSelect/utils.js
index 3260850f..85ac61aa 100644
--- a/src/DTableSelect/utils.js
+++ b/src/DTableSelect/utils.js
@@ -102,31 +102,49 @@ const MenuSelectStyle = {
     const { isDisabled, isFocused } = state;
     return ({
       ...provided,
-      fontSize: '13px',
+      padding: '8px',
+      fontSize: '14px',
       color: '#212529',
       cursor: isDisabled ? 'default' : 'pointer',
       backgroundColor: isFocused ? '#f5f5f5' : '#fff',
+      borderRadius: '4px',
       ':active': {
         backgroundColor: '#f5f5f5',
       },
       '.header-icon .dtable-font': {
-        color: '#aaa',
+        color: '#999',
       },
       '.header-icon .multicolor-icon': {
-        color: '#aaa',
+        color: '#999',
+      },
+      '.seatable-ui-select-tip': {
+        fontSize: '12px',
+        color: '#666666'
       },
     });
   },
   control: controlCallback,
   menuPortal: base => ({ ...base, zIndex: 9999 }),
   indicatorSeparator: noneCallback,
+  menuList: (provided) => ({
+    ...provided,
+    padding: '8px',
+  }),
+  valueContainer: (provided, state) => ({
+    ...provided,
+    padding: '2px 8px 2px 16px',
+  }),
+  dropdownIndicator: (provided, state) => ({
+    ...provided,
+    padding: 0,
+  }),
 };
 
 const DropdownIndicator = props => {
   return (
     components.DropdownIndicator && (
       <components.DropdownIndicator {...props}>
-        <span className="dtable-font dtable-icon-down3" style={{ fontSize: '12px', marginLeft: '-2px' }}></span>
+        <span className="dtable-font dtable-icon-down3" style={{ fontSize: '12px', marginLeft: '-2px', color: '#666666', paddingRight: '16px' }}></span>
       </components.DropdownIndicator>
     )
   );
@@ -160,10 +178,14 @@ MenuList.propTypes = {
 };
 
 const Option = props => {
+  const { isSelected, label } = props;
   return (
-    <div style={props.data.style}>
-      <components.Option {...props} />
-    </div>
+    <components.Option {...props}>
+      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', width: '100%' }}>
+        <span>{label}</span>
+        {isSelected && <span className="dtable-font dtable-icon-check" style={{ fontSize: '14px', color: '#666666', paddingLeft: '16px' }}></span>}
+      </div>
+    </components.Option>
   );
 };
 
@@ -173,4 +195,28 @@ Option.propTypes = {
   }),
 };
 
-export { UserSelectStyle, MenuSelectStyle, DropdownIndicator, ClearIndicator, MenuList, Option };
+const processOptionsWithClear = (options, isClearable) => {
+  if (isClearable && options && options.length > 0) {
+    return [
+      { label: '--', value: '__clear__' },
+      ...options
+    ];
+  }
+  return options;
+};
+
+const handleSelectChange = (selectedOption, actionMeta, onChangeCallback) => {
+  if (selectedOption && selectedOption.value === '__clear__') {
+    onChangeCallback(null, { ...actionMeta, action: 'clear' });
+  } else {
+    onChangeCallback(selectedOption, actionMeta);
+  }
+};
+
+const createHandleChange = (onChange) => {
+  return (selectedOption, actionMeta) => {
+    handleSelectChange(selectedOption, actionMeta, onChange);
+  };
+};
+
+export { UserSelectStyle, MenuSelectStyle, DropdownIndicator, ClearIndicator, MenuList, Option, processOptionsWithClear, handleSelectChange, createHandleChange };
diff --git a/src/SelectOptionGroup/index.css b/src/SelectOptionGroup/index.css
index e0b7767d..b86d3b24 100644
--- a/src/SelectOptionGroup/index.css
+++ b/src/SelectOptionGroup/index.css
@@ -6,7 +6,7 @@
   min-height: 60px;
   min-width: 100%;
   max-width: 15rem;
-  padding: 0.5rem 0;
+  padding-top: 0;
   box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
   background: #fff;
   border: 1px solid rgba(0, 40, 100, 0.12);
@@ -17,17 +17,23 @@
 .option-group .option-group-search {
   width: 100%;
   min-width: 170px;
-  padding: 0 10px 6px;
+}
+
+.option-group .option-group-content .label-space {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
 }
 
 .option-group-search .form-control {
-  height: 31px;
+  height: 32px;
+  border-radius: 4px;
 }
 
 .option-group .none-search-result {
   height: 100px;
   width: 100%;
-  padding: 10px;
   color: #666666;
 }
 
@@ -37,6 +43,10 @@
   overflow-y: auto;
 }
 
+.option-group .option-group-top {
+  padding-top: 8px !important;
+}
+
 .option {
   display: block;
   width: 100%;
@@ -53,8 +63,8 @@
 }
 
 .option.option-active {
-  background-color: #20a0ff;
-  color: #fff;
+  background-color: #f5f5f5;
+  color: #212529;
   cursor: pointer;
 }
 
@@ -74,10 +84,6 @@
   color: #aaa;
 }
 
-.option .select-option-name .single-select-option {
-  margin: 0 0 0 12px;
-}
-
 .option .select-option-name .multiple-select-option {
   margin: 0;
 }
@@ -97,7 +103,7 @@
 
 .option-group-dtable-ui-multiple-select-selector .multiple-check-icon .dtable-icon-check-mark {
   font-size: 12px;
-  color: #798d99;
+  color: #666666;
 }
 
 .option-group-dtable-ui-single-select-selector .option:hover,
@@ -111,3 +117,11 @@
 .option-group-selector-multiple-select .option.option-active .select-option-name {
   color: #212529;
 }
+
+.option-group-selector-single-select .option .select-option-name .single-select-option {
+  margin: 0;
+}
+
+.option-group-selector-single-select .form-control {
+  padding: .375rem .5rem !important;
+}
diff --git a/src/SelectOptionGroup/index.js b/src/SelectOptionGroup/index.js
index 29ecc6a7..ee82226d 100644
--- a/src/SelectOptionGroup/index.js
+++ b/src/SelectOptionGroup/index.js
@@ -5,6 +5,8 @@ import PropTypes from 'prop-types';
 import DTableSearchInput from '../DTableSearchInput';
 import KeyCodes from './KeyCodes';
 import ClickOutside from '../ClickOutside';
+import IconButton from '../IconButton';
+import { getLocale } from '../lang';
 
 import './index.css';
 
@@ -136,8 +138,14 @@ class SelectOptionGroup extends Component {
     }
   };
 
+  isEqual = (obj1, obj2) => {
+    if (obj1 === obj2) return true;
+    if (!obj1 || !obj2) return false;
+    return JSON.stringify(obj1) === JSON.stringify(obj2);
+  };
+
   renderOptGroup = (searchVal) => {
-    let { noOptionsPlaceholder, onSelectOption } = this.props;
+    let { noOptionsPlaceholder, onSelectOption, value, supportMultipleSelect } = this.props;
     this.filterOptions = this.props.getFilterOptions(searchVal);
     if (this.filterOptions.length === 0) {
       return (
@@ -147,6 +155,9 @@ class SelectOptionGroup extends Component {
     return this.filterOptions.map((opt, i) => {
       let key = opt.value.column ? opt.value.column.key : i;
       let isActive = this.state.activeIndex === i;
+      let isSelected = value && typeof value === 'object' && !supportMultipleSelect
+        ? this.isEqual(value.value, opt.value)
+        : (Array.isArray(value.value) ? value.value.includes(opt.value.column_key) : false);
       return (
         <Option
           key={`${key}-${i}`}
@@ -158,15 +169,22 @@ class SelectOptionGroup extends Component {
           supportMultipleSelect={this.props.supportMultipleSelect}
           disableHover={this.state.disableHover}
         >
-          {opt.label}
+          <div className='label-space'>
+            <div> {opt.label}</div>
+            <div className='label-check-icon'> {isSelected && <i className="dtable-font dtable-icon-check"/>}</div>
+          </div>
         </Option>
       );
     });
   };
 
+  clearValue = () => {
+    this.setState({ searchVal: '', activeIndex: -1, });
+  };
+
   render() {
     const { searchable, searchPlaceholder, top, left, minWidth, value, isShowSelected, isInModal, position,
-      className, addOptionAble, component } = this.props;
+      className, addOptionAble, component, supportMultipleSelect } = this.props;
     const { AddOption } = component || {};
     let { searchVal } = this.state;
     let style = { top: top || 0, left: left || 0 };
@@ -177,7 +195,7 @@ class SelectOptionGroup extends Component {
       style = {
         position: 'fixed',
         left: position.x,
-        top: position.y + position.height,
+        top: `${position.y + position.height + 4}px`,
         minWidth: position.width,
         opacity: 0,
       };
@@ -194,7 +212,7 @@ class SelectOptionGroup extends Component {
           onMouseDown={this.onMouseDown}
         >
           {isShowSelected &&
-            <div className="editor-list-delete mb-2" onClick={(e) => e.stopPropagation()}>{value.label || ''}</div>
+            <div className="editor-list-delete" onClick={(e) => e.stopPropagation()}>{value.label || ''}</div>
           }
           {searchable && (
             <div className="option-group-search">
@@ -204,10 +222,21 @@ class SelectOptionGroup extends Component {
                 onChange={this.onChangeSearch}
                 autoFocus={true}
                 ref={this.searchInputRef}
+                clearValue={this.clearValue}
+                isClearable={true}
+                components={{
+                  ClearIndicator: (props) => {
+                    return (
+                      <span className="clear-search-text" onClick={props.clearValue} title={getLocale('Clear_search_text')} aria-label={getLocale('Clear_search_text')}>
+                        <IconButton icon="x" />
+                      </span>
+                    );
+                  },
+                }}
               />
             </div>
           )}
-          <div className="option-group-content" ref={(ref) => this.optionGroupContentRef = ref}>
+          <div className={`option-group-content ${!searchable && !supportMultipleSelect ? 'option-group-top' : ''}`} ref={(ref) => this.optionGroupContentRef = ref}>
             {this.renderOptGroup(searchVal)}
           </div>
           {addOptionAble && AddOption}

From 2d6cd8ad79424bdc661ff5c5cb44e6c37d235786 Mon Sep 17 00:00:00 2001
From: GongFlying <150640661+gzcqqqqqqqq1@users.noreply.github.com>
Date: Wed, 29 Apr 2026 11:48:50 +0800
Subject: [PATCH 2/2] update app style

---
 .../widgets/filter-list/index.css             |  6 +--
 src/DTableGroupSelect/index.css               | 34 ---------------
 src/DTableGroupSelect/select-option-group.js  |  6 +--
 src/DTableSelect/index.js                     |  5 ++-
 src/DTableSelect/utils.js                     | 19 ++++++---
 src/SelectOptionGroup/index.css               | 41 ++++++++++++-------
 src/SelectOptionGroup/index.js                |  8 +---
 7 files changed, 47 insertions(+), 72 deletions(-)

diff --git a/src/DTableFiltersPopover/widgets/filter-list/index.css b/src/DTableFiltersPopover/widgets/filter-list/index.css
index 39412c41..309dd2d4 100644
--- a/src/DTableFiltersPopover/widgets/filter-list/index.css
+++ b/src/DTableFiltersPopover/widgets/filter-list/index.css
@@ -412,20 +412,20 @@
 
 .filter-header-icon {
   display: inline-block;
-  padding: 0 0.3125rem;
+  padding-right: 0.5rem;
   margin-left: -0.3125rem;
 }
 
 .filter-header-icon .dtable-font,
 .filter-header-icon .multicolor-icon {
   font-size: 14px;
-  color: #aaa;
+  color: #999;
   cursor: default;
 }
 
 .option.option-active .filter-header-icon .dtable-font,
 .option.option-active .filter-header-icon .multicolor-icon {
-  color: #fff;
+  color: #999;
 }
 
 .dtable-ui-filters-list .single-select-option,
diff --git a/src/DTableGroupSelect/index.css b/src/DTableGroupSelect/index.css
index ab1667eb..23cd841b 100644
--- a/src/DTableGroupSelect/index.css
+++ b/src/DTableGroupSelect/index.css
@@ -123,37 +123,3 @@
   font-size: 14px;
   margin-left: 16px;
 }
-
-.option-group-content .label-check-icon {
-  width: 30px;
-}
-
-.seatable-group-select .clear-search-text {
-  position: absolute;
-  display: inline-block;
-  height: 12px;
-  width: 12px;
-  line-height: 12px;
-  top: 10px !important;
-  right: 18px;
-}
-
-.seatable-group-select .seatable-icon-btn:not(.disabled):hover {
-  background-color:#FFFFFF;
-}
-
-.option-group-dtable-filter-select-column .seatable-icon-btn {
-  height: 12px !important;
-  width: 12px !important;
-  font-size: 12px !important;
-}
-
-.option-group-dtable-filter-select-column .clear-search-text {
-  position: absolute;
-  display: inline-block;
-  height: 12px;
-  width: 12px;
-  line-height: 12px;
-  top: 12px;
-  right: 18px;
-}
diff --git a/src/DTableGroupSelect/select-option-group.js b/src/DTableGroupSelect/select-option-group.js
index 3dd85ec3..8711d7fb 100644
--- a/src/DTableGroupSelect/select-option-group.js
+++ b/src/DTableGroupSelect/select-option-group.js
@@ -194,11 +194,7 @@ class SelectOptionGroup extends Component {
             clearValue={this.clearValue}
             components={{
               ClearIndicator: (props) => {
-                return (
-                  <span className="clear-search-text" onClick={props.clearValue} title={getLocale('Clear_search_text')} aria-label={getLocale('Clear_search_text')}>
-                    <IconButton icon="x" />
-                  </span>
-                );
+                return <i className={classnames('select-search-text-clear input-icon-addon seatable-icon dtable-font dtable-icon-x')} onClick={(e) => { e.stopPropagation(); e.nativeEvent.stopImmediatePropagation(); props.clearValue(); }}/>;
               },
             }}
           />
diff --git a/src/DTableSelect/index.js b/src/DTableSelect/index.js
index e15e3041..a89578bc 100644
--- a/src/DTableSelect/index.js
+++ b/src/DTableSelect/index.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import Select from 'react-select';
-import { MenuSelectStyle, DropdownIndicator, ClearIndicator, MenuList, Option, processOptionsWithClear, createHandleChange } from './utils';
+import { MenuSelectStyle, DropdownIndicator, MenuList, Option, processOptionsWithClear, createHandleChange } from './utils';
 
 export default class DTableSelect extends React.Component {
 
@@ -48,9 +48,10 @@ export default class DTableSelect extends React.Component {
     return (
       <Select
         value={value}
-        onChange={createHandleChange(onChange)}
+        onChange={createHandleChange(onChange, isMulti)}
         options={processedOptions}
         isMulti={isMulti}
+        isClearable={false}
         className={className}
         classNamePrefix={classNamePrefix}
         styles={style || MenuSelectStyle}
diff --git a/src/DTableSelect/utils.js b/src/DTableSelect/utils.js
index 85ac61aa..7c598e23 100644
--- a/src/DTableSelect/utils.js
+++ b/src/DTableSelect/utils.js
@@ -205,17 +205,24 @@ const processOptionsWithClear = (options, isClearable) => {
   return options;
 };
 
-const handleSelectChange = (selectedOption, actionMeta, onChangeCallback) => {
-  if (selectedOption && selectedOption.value === '__clear__') {
+const handleSelectChange = (selectedOption, actionMeta, onChangeCallback, isMulti) => {
+  if (isMulti && Array.isArray(selectedOption)) {
+    const hasClear = selectedOption && selectedOption.some(opt => opt && opt.value === '__clear__');
+    if (hasClear) {
+      onChangeCallback([], { ...actionMeta, action: 'clear' });
+      return;
+    }
+  } else if (selectedOption && selectedOption.value === '__clear__') {
     onChangeCallback(null, { ...actionMeta, action: 'clear' });
-  } else {
-    onChangeCallback(selectedOption, actionMeta);
+    return;
   }
+
+  onChangeCallback(selectedOption, actionMeta);
 };
 
-const createHandleChange = (onChange) => {
+const createHandleChange = (onChange, isMulti) => {
   return (selectedOption, actionMeta) => {
-    handleSelectChange(selectedOption, actionMeta, onChange);
+    handleSelectChange(selectedOption, actionMeta, onChange, isMulti);
   };
 };
 
diff --git a/src/SelectOptionGroup/index.css b/src/SelectOptionGroup/index.css
index b86d3b24..3ac91146 100644
--- a/src/SelectOptionGroup/index.css
+++ b/src/SelectOptionGroup/index.css
@@ -41,6 +41,7 @@
   flex: 1;
   max-height: 252px;
   overflow-y: auto;
+  padding: 8px;
 }
 
 .option-group .option-group-top {
@@ -51,7 +52,7 @@
   display: block;
   width: 100%;
   line-height: 24px;
-  padding: 0.25rem 10px;
+  padding: 0.25rem 8px;
   clear: both;
   font-weight: 400;
   text-align: inherit;
@@ -60,30 +61,40 @@
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
+  border-radius: 4px;
 }
 
-.option.option-active {
-  background-color: #f5f5f5;
-  color: #212529;
-  cursor: pointer;
+.option-group .option-group-search .form-control {
+  border: none;
+  border-bottom: 1px solid rgb(0 40 100 / 12%) !important;
+  border-radius: 4px 4px 0 0;
+  padding: .375rem 1rem !important;
+  height: 32px;
 }
 
-.option:hover .header-icon .dtable-font,
-.option:hover .header-icon .multicolor-icon,
-.option.option-active .select-option-name {
-  color: #fff;
+.option-group .option-group-search .form-control:focus {
+  border-color: transparent !important;
+  border-bottom: 1px solid rgb(0 40 100 / 12%) !important;
+  box-shadow: none !important;
 }
 
-.option.option-active .header-icon .dtable-font,
-.option.option-active .header-icon .multicolor-icon {
-  color: #fff;
+
+.option-group-content .label-check-icon {
+  margin-left: 16px;
 }
 
-.option:not(.option-active):hover .header-icon .dtable-font,
-.option:not(.option-active):hover .header-icon .multicolor-icon {
-  color: #aaa;
+.option-group-content .dtable-icon-check {
+  font-size: 14px !important;
+  color: #666666;
 }
 
+.option.option-active {
+  background-color: #f5f5f5;
+  color: #212529;
+  cursor: pointer;
+}
+
+
 .option .select-option-name .multiple-select-option {
   margin: 0;
 }
diff --git a/src/SelectOptionGroup/index.js b/src/SelectOptionGroup/index.js
index ee82226d..197c5b46 100644
--- a/src/SelectOptionGroup/index.js
+++ b/src/SelectOptionGroup/index.js
@@ -5,8 +5,6 @@ import PropTypes from 'prop-types';
 import DTableSearchInput from '../DTableSearchInput';
 import KeyCodes from './KeyCodes';
 import ClickOutside from '../ClickOutside';
-import IconButton from '../IconButton';
-import { getLocale } from '../lang';
 
 import './index.css';
 
@@ -226,11 +224,7 @@ class SelectOptionGroup extends Component {
                 isClearable={true}
                 components={{
                   ClearIndicator: (props) => {
-                    return (
-                      <span className="clear-search-text" onClick={props.clearValue} title={getLocale('Clear_search_text')} aria-label={getLocale('Clear_search_text')}>
-                        <IconButton icon="x" />
-                      </span>
-                    );
+                    return <i className={classnames('select-search-text-clear input-icon-addon seatable-icon dtable-font dtable-icon-x')} onClick={(e) => { e.stopPropagation(); e.nativeEvent.stopImmediatePropagation(); props.clearValue(); }}/>;
                   },
                 }}
               />