bkui-vue 1.0.3-beta.10 → 1.0.3-beta.11

package/lib/select/option.d.ts

@@ -1,3 +1,4 @@
+import { VNode } from 'vue';
 import { SelectedTypeEnum } from '../shared';
 declare const _default: import("vue").DefineComponent<{
     id: {
@@ -23,10 +24,11 @@ declare const _default: import("vue").DefineComponent<{
     selectedStyle: import("vue").ComputedRef<SelectedTypeEnum>;
     optionName: import("vue").ComputedRef<string | number>;
     optionID: import("vue").ComputedRef<unknown>;
-    isDisabled: import("vue").ComputedRef<boolean>;
+    highlightKeyword: import("vue").ComputedRef<boolean>;
     handleOptionClick: () => void;
     handleMouseEnter: () => void;
     resolveClassName: (cls: string) => string;
+    transformNode: (str: string) => string | (string | VNode)[];
     visible: import("vue").Ref<boolean>;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     id: {

package/lib/select/pinyin/core.d.ts

@@ -0,0 +1,14 @@
+declare namespace _default {
+    export { isSupported };
+    export { parse };
+    export { patchDict };
+    export { genToken };
+    export function convertToPinyin(str: any, lowerCase: any, separator: any): any;
+}
+export default _default;
+declare function isSupported(force: any): any;
+declare function parse(str: any): any;
+declare function patchDict(patchers: any): void;
+declare function genToken(ch: any): {
+    source: any;
+};

package/lib/select/pinyin/dict.d.ts

@@ -0,0 +1,34 @@
+declare namespace _default {
+    export { PINYINS };
+    export { UNIHANS };
+    export { EXCEPTIONS };
+}
+export default _default;
+declare const PINYINS: string[];
+declare const UNIHANS: string[];
+declare namespace EXCEPTIONS {
+    const 曾: string;
+    const 沈: string;
+    const 嗲: string;
+    const 碡: string;
+    const 聒: string;
+    const 炔: string;
+    const 蚵: string;
+    const 砉: string;
+    const 嬤: string;
+    const 嬷: string;
+    const 蹒: string;
+    const 蹊: string;
+    const 丬: string;
+    const 霰: string;
+    const 莘: string;
+    const 豉: string;
+    const 饧: string;
+    const 筠: string;
+    const 长: string;
+    const 帧: string;
+    const 峙: string;
+    const 郍: string;
+    const 芎: string;
+    const 谁: string;
+}

package/lib/select/pinyin/index.d.ts

@@ -0,0 +1,2 @@
+export default pinyin;
+import pinyin from "./core";

package/lib/select/select.css

@@ -111,6 +111,14 @@
 .bk-select .bk-select-trigger .bk-select-tag.has-prefix {
   padding-left: 0;
 }
+.bk-select .bk-select-trigger .bk-select-tag-wrapper {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  overflow: hidden;
+  gap: 4px;
+  padding: 4px 0;
+}
 .bk-select .bk-select-trigger .bk-select-tag.collapse-tag .bk-select-tag-wrapper {
   height: 30px;
 }
@@ -121,12 +129,6 @@
   min-height: 32px;
   flex-wrap: wrap;
 }
-.bk-select .bk-select-trigger .bk-select-tag-wrapper {
-  display: flex;
-  align-items: center;
-  flex-wrap: wrap;
-  overflow: hidden;
-}
 .bk-select .bk-select-trigger .bk-select-tag:not(.is-disabled):hover {
   border-color: #979ba5;
 }
@@ -172,7 +174,7 @@
   width: 1%;
   height: 22px;
   padding: 0;
-  margin: 2px 5px 4px 0;
+  margin: 0px 5px 0px 0;
   background-color: transparent;
   border: none;
   flex-grow: 1;
@@ -288,6 +290,29 @@
 .bk-popover.bk-pop2-content.bk-select-popover .bk-select-content-wrapper .bk-select-options {
   padding: 4px 0;
 }
+.bk-popover.bk-pop2-content.bk-select-popover .bk-select-content-wrapper .bk-select-all {
+  padding: 4px 0;
+  border-bottom: 1px solid #dcdee5;
+}
+.bk-popover.bk-pop2-content.bk-select-popover .bk-select-content-wrapper .bk-select-all .wrapper {
+  display: flex;
+  align-items: center;
+  height: 32px;
+  padding: 0 12px;
+  cursor: pointer;
+  color: #63656e;
+}
+.bk-popover.bk-pop2-content.bk-select-popover .bk-select-content-wrapper .bk-select-all .wrapper:hover {
+  background-color: #f5f7fa;
+}
+.bk-popover.bk-pop2-content.bk-select-popover .bk-select-content-wrapper .bk-select-all .wrapper.active {
+  background-color: #e1ecff;
+  color: #3a84ff;
+}
+.bk-popover.bk-pop2-content.bk-select-popover .bk-select-content-wrapper .bk-select-all .wrapper .select-all-icon {
+  margin-right: 4px;
+  font-size: 16px;
+}
 .bk-popover.bk-pop2-content.bk-select-popover .bk-select-content-wrapper .bk-select-option {
   position: relative;
   display: flex;
@@ -320,6 +345,10 @@
   text-overflow: ellipsis;
   white-space: nowrap;
 }
+.bk-popover.bk-pop2-content.bk-select-popover .bk-select-content-wrapper .bk-select-option-item .is-keyword {
+  display: inline-flex;
+  color: #3a84ff;
+}
 .bk-popover.bk-pop2-content.bk-select-popover .bk-select-content-wrapper .bk-select-option.is-hover {
   background-color: #f5f7fa;
 }

package/lib/select/select.d.ts

@@ -296,6 +296,16 @@ declare const _default: import("vue").DefineComponent<{
     filterOption: {
         type: FunctionConstructor;
     };
+    searchWithPinyin: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    highlightKeyword: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
 }, {
     t: import("vue").ComputedRef<{
         noData: string;
@@ -502,6 +512,7 @@ declare const _default: import("vue").DefineComponent<{
     curContentText: import("vue").ComputedRef<string>;
     isGroup: import("vue").ComputedRef<boolean>;
     searchValue: import("vue").Ref<string>;
+    curSearchValue: import("vue").ComputedRef<string>;
     customOptionName: import("vue").Ref<string>;
     isShowAll: import("vue").ComputedRef<boolean>;
     isShowSelectAll: import("vue").ComputedRef<boolean>;
@@ -637,6 +648,7 @@ declare const _default: import("vue").DefineComponent<{
         };
     }>>>>;
     isAllSelected: import("vue").ComputedRef<boolean>;
+    isAll: import("vue").ComputedRef<boolean>;
     focusInput: () => void;
     setHover: () => void;
     cancelHover: () => void;
@@ -646,7 +658,8 @@ declare const _default: import("vue").DefineComponent<{
     handleClear: (e: Event) => void;
     hidePopover: () => void;
     showPopover: () => void;
-    handleToggleSelectAll: () => void;
+    toggleSelectAll: () => void;
+    toggleAll: () => void;
     handleOptionSelected: (option: OptionInstanceType) => void;
     handleClickOutside: ({ event }: {
         event: any;
@@ -662,7 +675,7 @@ declare const _default: import("vue").DefineComponent<{
     localSelectAllText: import("vue").ComputedRef<string>;
     resolveClassName: (cls: string) => string;
     handleCreateCustomOption: (val: string | number, e: KeyboardEvent) => void;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("blur" | "change" | "focus" | "select" | "toggle" | "clear" | "update:modelValue" | "scroll-end" | "tag-remove" | "deselect")[], "blur" | "change" | "focus" | "select" | "toggle" | "clear" | "update:modelValue" | "scroll-end" | "tag-remove" | "deselect", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("blur" | "change" | "focus" | "select" | "toggle" | "clear" | "update:modelValue" | "scroll-end" | "tag-remove" | "deselect" | "search-change")[], "blur" | "change" | "focus" | "select" | "toggle" | "clear" | "update:modelValue" | "scroll-end" | "tag-remove" | "deselect" | "search-change", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     modelValue: import("vue-types").VueTypeValidableDef<any>;
     multiple: import("vue-types").VueTypeValidableDef<boolean> & {
         default: boolean;
@@ -958,6 +971,16 @@ declare const _default: import("vue").DefineComponent<{
     filterOption: {
         type: FunctionConstructor;
     };
+    searchWithPinyin: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    highlightKeyword: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
 }>> & {
     onFocus?: (...args: any[]) => any;
     onBlur?: (...args: any[]) => any;
@@ -969,6 +992,7 @@ declare const _default: import("vue").DefineComponent<{
     "onScroll-end"?: (...args: any[]) => any;
     "onTag-remove"?: (...args: any[]) => any;
     onDeselect?: (...args: any[]) => any;
+    "onSearch-change"?: (...args: any[]) => any;
 }, {
     prefix: string;
     size: "default" | "small" | "large" | "huge";
@@ -986,6 +1010,7 @@ declare const _default: import("vue").DefineComponent<{
     withValidate: boolean;
     noDataText: string;
     showSelectedIcon: boolean;
+    highlightKeyword: boolean;
     filterable: boolean;
     allowCreate: boolean;
     collapseTags: boolean;
@@ -1008,5 +1033,6 @@ declare const _default: import("vue").DefineComponent<{
     allowEmptyValues: unknown[];
     autoFocus: boolean;
     keepSearchValue: boolean;
+    searchWithPinyin: boolean;
 }, {}>;
 export default _default;

package/lib/select/select.less

@@ -168,6 +168,15 @@
         padding-left: 0;
       }
 
+      &-wrapper {
+        display: flex;
+        align-items: center;
+        flex-wrap: wrap;
+        overflow: hidden;
+        gap: 4px;
+        padding: 4px 0;
+      }
+
       &.collapse-tag .@{bk-prefix}-select-tag-wrapper {
         height: 30px;
       }
@@ -180,13 +189,6 @@
         flex-wrap: wrap;
       }
 
-      &-wrapper {
-        display: flex;
-        align-items: center;
-        flex-wrap: wrap;
-        overflow: hidden;
-      }
-
       &:not(.is-disabled):hover {
         border-color: #979ba5;
       }
@@ -223,7 +225,7 @@
         width: 1%;
         height: 22px;
         padding: 0;
-        margin: 2px 5px 4px 0;
+        margin: 0px 5px 0px 0;
         background-color: transparent;
         border: none;
         flex-grow: 1;
@@ -267,7 +269,7 @@
     padding: 0 10px;
     margin-right: 10px;
     color: #63656e;
-    background-color: #f5f7fa;
+    background-color: @select-hover-color;
     border-right: 1px solid #c4c6cc;
     align-items: center;
   }
@@ -331,6 +333,30 @@
           padding: 4px 0;
         }
 
+        .@{bk-prefix}-select-all {
+          padding: 4px 0;
+          border-bottom: 1px solid @border-color;
+          .wrapper {
+            display: flex;
+            align-items: center;
+            height: 32px;
+            padding: 0 12px;
+            cursor: pointer;
+            color: @default-color;
+            &:hover {
+              background-color: @select-hover-color;
+            }
+            &.active {
+              background-color: @select-active-color;
+              color: @primary-color;
+            }
+            .select-all-icon {
+              margin-right: 4px;
+              font-size: 16px;
+            }
+          }  
+        }
+
         .@{bk-prefix}-select-option {
           position: relative;
           display: flex;
@@ -360,15 +386,19 @@
 
           &-item {
             .ellipsis();
+            .is-keyword {
+              display: inline-flex;
+              color: @primary-color;
+            }
           }
 
           &.is-hover {
-            background-color: #f5f7fa;
+            background-color: @select-hover-color;
           }
 
           &:hover {
             color: #63656e;
-            background-color: #f5f7fa;
+            background-color: @select-hover-color;
           }
 
           &.is-selected:not(.is-checkbox) {
@@ -390,11 +420,11 @@
             }
 
             &.is-hover {
-              background-color: #f5f7fa;
+              background-color: @select-hover-color;
             }
 
             &:hover {
-              background-color: #f5f7fa;
+              background-color: @select-hover-color;
             }
           }
         }

package/lib/select/select.variable.css

@@ -12,6 +12,7 @@
   --whitesmoke-color: #fafbfd;
   --disable-color: #dcdee5;
   --disable-bg-color: #f9fafd;
+  --border-color: #dcdee5;
   --font-size-base: 12px;
   --font-size-medium: 14px;
   --font-size-large: 16px;
@@ -123,6 +124,8 @@
   --search-select-placeholder-color: var(--light-gray);
   --search-select-message-color: var(--danger-color);
   --search-select-menu-border-color: var(--disable-color);
+  --select-active-color: #e1ecff;
+  --select-hover-color: #f5f7fa;
 }
 @keyframes loading-scale-animate {
   0% {
@@ -237,6 +240,14 @@
 .bk-select .bk-select-trigger .bk-select-tag.has-prefix {
   padding-left: 0;
 }
+.bk-select .bk-select-trigger .bk-select-tag-wrapper {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  overflow: hidden;
+  gap: 4px;
+  padding: 4px 0;
+}
 .bk-select .bk-select-trigger .bk-select-tag.collapse-tag .bk-select-tag-wrapper {
   height: 30px;
 }
@@ -247,12 +258,6 @@
   min-height: 32px;
   flex-wrap: wrap;
 }
-.bk-select .bk-select-trigger .bk-select-tag-wrapper {
-  display: flex;
-  align-items: center;
-  flex-wrap: wrap;
-  overflow: hidden;
-}
 .bk-select .bk-select-trigger .bk-select-tag:not(.is-disabled):hover {
   border-color: #979ba5;
 }
@@ -298,7 +303,7 @@
   width: 1%;
   height: 22px;
   padding: 0;
-  margin: 2px 5px 4px 0;
+  margin: 0px 5px 0px 0;
   background-color: transparent;
   border: none;
   flex-grow: 1;
@@ -414,6 +419,29 @@
 .bk-popover.bk-pop2-content.bk-select-popover .bk-select-content-wrapper .bk-select-options {
   padding: 4px 0;
 }
+.bk-popover.bk-pop2-content.bk-select-popover .bk-select-content-wrapper .bk-select-all {
+  padding: 4px 0;
+  border-bottom: 1px solid #dcdee5;
+}
+.bk-popover.bk-pop2-content.bk-select-popover .bk-select-content-wrapper .bk-select-all .wrapper {
+  display: flex;
+  align-items: center;
+  height: 32px;
+  padding: 0 12px;
+  cursor: pointer;
+  color: #63656e;
+}
+.bk-popover.bk-pop2-content.bk-select-popover .bk-select-content-wrapper .bk-select-all .wrapper:hover {
+  background-color: #f5f7fa;
+}
+.bk-popover.bk-pop2-content.bk-select-popover .bk-select-content-wrapper .bk-select-all .wrapper.active {
+  background-color: #e1ecff;
+  color: #3a84ff;
+}
+.bk-popover.bk-pop2-content.bk-select-popover .bk-select-content-wrapper .bk-select-all .wrapper .select-all-icon {
+  margin-right: 4px;
+  font-size: 16px;
+}
 .bk-popover.bk-pop2-content.bk-select-popover .bk-select-content-wrapper .bk-select-option {
   position: relative;
   display: flex;
@@ -446,6 +474,10 @@
   text-overflow: ellipsis;
   white-space: nowrap;
 }
+.bk-popover.bk-pop2-content.bk-select-popover .bk-select-content-wrapper .bk-select-option-item .is-keyword {
+  display: inline-flex;
+  color: #3a84ff;
+}
 .bk-popover.bk-pop2-content.bk-select-popover .bk-select-content-wrapper .bk-select-option.is-hover {
   background-color: #f5f7fa;
 }

package/lib/select/type.d.ts

@@ -15,15 +15,14 @@ export interface ISelectContext {
     activeOptionValue: any;
     showSelectedIcon: boolean;
     selectedStyle: SelectedTypeEnum;
-    isShowAll: Boolean;
-    allOptionId: any;
+    curSearchValue: string;
+    highlightKeyword: boolean;
     register(key: any, option: OptionInstanceType): any;
     unregister(key: any): any;
     registerGroup(key: any, option: GroupInstanceType): any;
     unregisterGroup(key: any): any;
     handleOptionSelected(option: OptionInstanceType): void;
     handleGetLabelByValue(value: any): string | number;
-    handleToggleAll(): void;
 }
 export interface IOptionGroupContext {
     disabled: boolean;

package/lib/sideslider/sideslider.variable.css

@@ -12,6 +12,7 @@
   --whitesmoke-color: #fafbfd;
   --disable-color: #dcdee5;
   --disable-bg-color: #f9fafd;
+  --border-color: #dcdee5;
   --font-size-base: 12px;
   --font-size-medium: 14px;
   --font-size-large: 16px;
@@ -123,6 +124,8 @@
   --search-select-placeholder-color: var(--light-gray);
   --search-select-message-color: var(--danger-color);
   --search-select-menu-border-color: var(--disable-color);
+  --select-active-color: #e1ecff;
+  --select-hover-color: #f5f7fa;
 }
 .bk-sideslider {
   position: fixed;

package/lib/slider/slider.variable.css

@@ -12,6 +12,7 @@
   --whitesmoke-color: #fafbfd;
   --disable-color: #dcdee5;
   --disable-bg-color: #f9fafd;
+  --border-color: #dcdee5;
   --font-size-base: 12px;
   --font-size-medium: 14px;
   --font-size-large: 16px;
@@ -123,6 +124,8 @@
   --search-select-placeholder-color: var(--light-gray);
   --search-select-message-color: var(--danger-color);
   --search-select-menu-border-color: var(--disable-color);
+  --select-active-color: #e1ecff;
+  --select-hover-color: #f5f7fa;
 }
 .bk-slider {
   display: flex;

package/lib/steps/steps.variable.css

@@ -13,6 +13,7 @@
   --whitesmoke-color: #fafbfd;
   --disable-color: #dcdee5;
   --disable-bg-color: #f9fafd;
+  --border-color: #dcdee5;
   --font-size-base: 12px;
   --font-size-medium: 14px;
   --font-size-large: 16px;
@@ -124,6 +125,8 @@
   --search-select-placeholder-color: var(--light-gray);
   --search-select-message-color: var(--danger-color);
   --search-select-menu-border-color: var(--disable-color);
+  --select-active-color: #e1ecff;
+  --select-hover-color: #f5f7fa;
 }
 * {
   box-sizing: border-box;

package/lib/styles/mixins/animate.variable.css

@@ -12,6 +12,7 @@
   --whitesmoke-color: #fafbfd;
   --disable-color: #dcdee5;
   --disable-bg-color: #f9fafd;
+  --border-color: #dcdee5;
   --font-size-base: 12px;
   --font-size-medium: 14px;
   --font-size-large: 16px;
@@ -123,6 +124,8 @@
   --search-select-placeholder-color: var(--light-gray);
   --search-select-message-color: var(--danger-color);
   --search-select-menu-border-color: var(--disable-color);
+  --select-active-color: #e1ecff;
+  --select-hover-color: #f5f7fa;
 }
 @keyframes loading-scale-animate {
   0% {

package/lib/styles/mixins/popper.variable.css

@@ -12,6 +12,7 @@
   --whitesmoke-color: #fafbfd;
   --disable-color: #dcdee5;
   --disable-bg-color: #f9fafd;
+  --border-color: #dcdee5;
   --font-size-base: 12px;
   --font-size-medium: 14px;
   --font-size-large: 16px;
@@ -123,6 +124,8 @@
   --search-select-placeholder-color: var(--light-gray);
   --search-select-message-color: var(--danger-color);
   --search-select-menu-border-color: var(--disable-color);
+  --select-active-color: #e1ecff;
+  --select-hover-color: #f5f7fa;
 }
 .bk-popper {
   display: none;

package/lib/styles/mixins/scroll.variable.css

@@ -12,6 +12,7 @@
   --whitesmoke-color: #fafbfd;
   --disable-color: #dcdee5;
   --disable-bg-color: #f9fafd;
+  --border-color: #dcdee5;
   --font-size-base: 12px;
   --font-size-medium: 14px;
   --font-size-large: 16px;
@@ -123,6 +124,8 @@
   --search-select-placeholder-color: var(--light-gray);
   --search-select-message-color: var(--danger-color);
   --search-select-menu-border-color: var(--disable-color);
+  --select-active-color: #e1ecff;
+  --select-hover-color: #f5f7fa;
 }
 .bk-F-scroll-x {
   overflow-x: auto;

package/lib/styles/reset.variable.css

@@ -12,6 +12,7 @@
   --whitesmoke-color: #fafbfd;
   --disable-color: #dcdee5;
   --disable-bg-color: #f9fafd;
+  --border-color: #dcdee5;
   --font-size-base: 12px;
   --font-size-medium: 14px;
   --font-size-large: 16px;
@@ -123,6 +124,8 @@
   --search-select-placeholder-color: var(--light-gray);
   --search-select-message-color: var(--danger-color);
   --search-select-menu-border-color: var(--disable-color);
+  --select-active-color: #e1ecff;
+  --select-hover-color: #f5f7fa;
 }
 .scroll-bar-style::-webkit-scrollbar {
   width: 4px;

package/lib/styles/themes/themes.less

@@ -13,6 +13,7 @@
 @whitesmoke-color: #fafbfd;
 @disable-color: #dcdee5;
 @disable-bg-color: #f9fafd;
+@border-color: #dcdee5;
 
 @font-size-base: 12px;
 @font-size-medium: 14px;
@@ -167,3 +168,7 @@
 @search-select-placeholder-color: @light-gray;
 @search-select-message-color: @danger-color;
 @search-select-menu-border-color: @disable-color;
+
+// select theme
+@select-active-color: #e1ecff;
+@select-hover-color: #f5f7fa;

package/lib/swiper/swiper.variable.css

@@ -12,6 +12,7 @@
   --whitesmoke-color: #fafbfd;
   --disable-color: #dcdee5;
   --disable-bg-color: #f9fafd;
+  --border-color: #dcdee5;
   --font-size-base: 12px;
   --font-size-medium: 14px;
   --font-size-large: 16px;
@@ -123,6 +124,8 @@
   --search-select-placeholder-color: var(--light-gray);
   --search-select-message-color: var(--danger-color);
   --search-select-menu-border-color: var(--disable-color);
+  --select-active-color: #e1ecff;
+  --select-hover-color: #f5f7fa;
 }
 .bk-swiper-home {
   position: relative;

package/lib/switcher/switcher.variable.css

@@ -12,6 +12,7 @@
   --whitesmoke-color: #fafbfd;
   --disable-color: #dcdee5;
   --disable-bg-color: #f9fafd;
+  --border-color: #dcdee5;
   --font-size-base: 12px;
   --font-size-medium: 14px;
   --font-size-large: 16px;
@@ -123,6 +124,8 @@
   --search-select-placeholder-color: var(--light-gray);
   --search-select-message-color: var(--danger-color);
   --search-select-menu-border-color: var(--disable-color);
+  --select-active-color: #e1ecff;
+  --select-hover-color: #f5f7fa;
 }
 @keyframes loading-scale-animate {
   0% {

package/lib/tab/tab.variable.css

@@ -12,6 +12,7 @@
   --whitesmoke-color: #fafbfd;
   --disable-color: #dcdee5;
   --disable-bg-color: #f9fafd;
+  --border-color: #dcdee5;
   --font-size-base: 12px;
   --font-size-medium: 14px;
   --font-size-large: 16px;
@@ -123,6 +124,8 @@
   --search-select-placeholder-color: var(--light-gray);
   --search-select-message-color: var(--danger-color);
   --search-select-menu-border-color: var(--disable-color);
+  --select-active-color: #e1ecff;
+  --select-hover-color: #f5f7fa;
 }
 .bk-tab {
   position: relative;

package/lib/table/plugins/head-filter.variable.css

@@ -12,6 +12,7 @@
   --whitesmoke-color: #fafbfd;
   --disable-color: #dcdee5;
   --disable-bg-color: #f9fafd;
+  --border-color: #dcdee5;
   --font-size-base: 12px;
   --font-size-medium: 14px;
   --font-size-large: 16px;
@@ -123,6 +124,8 @@
   --search-select-placeholder-color: var(--light-gray);
   --search-select-message-color: var(--danger-color);
   --search-select-menu-border-color: var(--disable-color);
+  --select-active-color: #e1ecff;
+  --select-hover-color: #f5f7fa;
 }
 .bk-table-head-action {
   display: flex;