bkui-vue 1.0.3-beta.9 → 2.0.1-beta.10

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) => (VNode | string)[] | string;
     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

@@ -34,21 +34,24 @@
 .bk-select.large .bk-select-content-wrapper {
   font-size: 14px;
 }
-.bk-select.is-focus.normal .bk-select-trigger .bk-select-tag.bk-select-tag--default {
+.bk-select.is-focus:not(.is-disabled).normal .bk-select-trigger .bk-select-tag {
   border-color: #3a84ff;
   box-shadow: 0px 0px 3px 0px #a3c5fd;
 }
-.bk-select.is-focus .bk-input--default {
+.bk-select.is-focus:not(.is-disabled).simplicity .bk-select-trigger .bk-select-tag {
+  border-bottom-color: #3a84ff;
+}
+.bk-select.is-focus .bk-input {
   border-color: #3a84ff;
   outline: 0;
   box-shadow: 0px 0px 3px 0px #a3c5fd;
 }
-.bk-select.is-focus .bk-input--default.is-simplicity {
+.bk-select.is-focus .bk-input.is-simplicity {
   border-color: transparent;
   border-bottom-color: #3a84ff;
   box-shadow: none;
 }
-.bk-select.is-focus .bk-input--default.is-simplicity .bk-input--text {
+.bk-select.is-focus .bk-input.is-simplicity .bk-input--text {
   background-color: #f5f7fa;
 }
 .bk-select.popover-show .bk-select-trigger .angle-up {
@@ -108,9 +111,28 @@
 .bk-select .bk-select-trigger .bk-select-tag::placeholder {
   color: #c4c6cc;
 }
+.bk-select .bk-select-trigger .bk-select-tag.is-simplicity {
+  background-color: transparent;
+  border-color: transparent;
+  border-bottom-color: #c4c6cc;
+}
+.bk-select .bk-select-trigger .bk-select-tag.is-simplicity:hover {
+  background-color: #f5f7fa;
+  border-color: transparent;
+  border-bottom-color: #c4c6cc;
+  box-shadow: none;
+}
 .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,13 +143,7 @@
   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 {
+.bk-select .bk-select-trigger .bk-select-tag:not(.is-disabled,.is-simplicity):hover {
   border-color: #979ba5;
 }
 .bk-select .bk-select-trigger .bk-select-tag.is-disabled {
@@ -172,7 +188,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,12 +304,34 @@
 .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;
-  height: 32px;
+  min-height: 32px;
   padding: 0 12px;
-  line-height: 32px;
   color: #63656e;
   text-align: left;
   cursor: pointer;
@@ -320,6 +358,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

@@ -62,8 +62,8 @@ declare const _default: import("vue").DefineComponent<{
     multipleMode: import("vue-types").VueTypeDef<string> & {
         default: string;
     };
-    tagTheme: import("vue-types").VueTypeDef<"" | "info" | "success" | "warning" | "danger"> & {
-        default: "" | "info" | "success" | "warning" | "danger";
+    tagTheme: import("vue-types").VueTypeDef<"" | "info" | "success" | "danger" | "warning"> & {
+        default: "" | "info" | "success" | "danger" | "warning";
     };
     behavior: import("vue-types").VueTypeDef<"normal" | "simplicity"> & {
         default: "normal" | "simplicity";
@@ -143,8 +143,8 @@ declare const _default: import("vue").DefineComponent<{
         } & {
             default: boolean;
         };
-        placement: import("vue-types").VueTypeValidableDef<"auto" | "auto-start" | "auto-end" | "top" | "right" | "bottom" | "left" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end"> & {
-            default: "auto" | "auto-start" | "auto-end" | "top" | "right" | "bottom" | "left" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end";
+        placement: import("vue-types").VueTypeValidableDef<"auto" | "auto-end" | "auto-start" | "bottom" | "bottom-end" | "bottom-start" | "left" | "left-end" | "left-start" | "right" | "right-end" | "right-start" | "top" | "top-end" | "top-start"> & {
+            default: "auto" | "auto-end" | "auto-start" | "bottom" | "bottom-end" | "bottom-start" | "left" | "left-end" | "left-start" | "right" | "right-end" | "right-start" | "top" | "top-end" | "top-start";
         };
         theme: import("vue-types").VueTypeValidableDef<string> & {
             default: string;
@@ -282,6 +282,11 @@ declare const _default: import("vue").DefineComponent<{
     } & {
         default: boolean;
     };
+    disableFocusBehavior: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
     keepSearchValue: import("vue-types").VueTypeValidableDef<boolean> & {
         default: boolean;
     } & {
@@ -296,6 +301,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;
@@ -326,8 +341,8 @@ declare const _default: import("vue").DefineComponent<{
             type: import("vue-types/dist/types").PropType<ISelected[]>;
             default: () => any[];
         };
-        tagTheme: import("vue-types").VueTypeDef<"" | "info" | "success" | "warning" | "danger"> & {
-            default: "" | "info" | "success" | "warning" | "danger";
+        tagTheme: import("vue-types").VueTypeDef<"" | "info" | "success" | "danger" | "warning"> & {
+            default: "" | "info" | "success" | "danger" | "warning";
         };
         placeholder: import("vue-types").VueTypeValidableDef<string> & {
             default: string;
@@ -355,10 +370,13 @@ declare const _default: import("vue").DefineComponent<{
         } & {
             default: boolean;
         };
+        behavior: import("vue-types").VueTypeDef<"normal" | "simplicity"> & {
+            default: "normal" | "simplicity";
+        };
     }>> & {
         onKeydown?: (...args: any[]) => any;
-        "onUpdate:modelValue"?: (...args: any[]) => any;
         onEnter?: (...args: any[]) => any;
+        "onUpdate:modelValue"?: (...args: any[]) => any;
         onRemove?: (...args: any[]) => any;
     }, {
         collapseTagRef: import("vue").Ref<any>;
@@ -380,8 +398,8 @@ declare const _default: import("vue").DefineComponent<{
             type: import("vue-types/dist/types").PropType<ISelected[]>;
             default: () => any[];
         };
-        tagTheme: import("vue-types").VueTypeDef<"" | "info" | "success" | "warning" | "danger"> & {
-            default: "" | "info" | "success" | "warning" | "danger";
+        tagTheme: import("vue-types").VueTypeDef<"" | "info" | "success" | "danger" | "warning"> & {
+            default: "" | "info" | "success" | "danger" | "warning";
         };
         placeholder: import("vue-types").VueTypeValidableDef<string> & {
             default: string;
@@ -409,15 +427,19 @@ declare const _default: import("vue").DefineComponent<{
         } & {
             default: boolean;
         };
+        behavior: import("vue-types").VueTypeDef<"normal" | "simplicity"> & {
+            default: "normal" | "simplicity";
+        };
     }>> & {
         onKeydown?: (...args: any[]) => any;
-        "onUpdate:modelValue"?: (...args: any[]) => any;
         onEnter?: (...args: any[]) => any;
+        "onUpdate:modelValue"?: (...args: any[]) => any;
         onRemove?: (...args: any[]) => any;
     }, {
         disabled: boolean;
         placeholder: string;
-        tagTheme: "" | "info" | "success" | "warning" | "danger";
+        tagTheme: "" | "info" | "success" | "danger" | "warning";
+        behavior: "normal" | "simplicity";
         selected: ISelected[];
         filterable: boolean;
         allowCreate: boolean;
@@ -434,8 +456,8 @@ declare const _default: import("vue").DefineComponent<{
             type: import("vue-types/dist/types").PropType<ISelected[]>;
             default: () => any[];
         };
-        tagTheme: import("vue-types").VueTypeDef<"" | "info" | "success" | "warning" | "danger"> & {
-            default: "" | "info" | "success" | "warning" | "danger";
+        tagTheme: import("vue-types").VueTypeDef<"" | "info" | "success" | "danger" | "warning"> & {
+            default: "" | "info" | "success" | "danger" | "warning";
         };
         placeholder: import("vue-types").VueTypeValidableDef<string> & {
             default: string;
@@ -463,10 +485,13 @@ declare const _default: import("vue").DefineComponent<{
         } & {
             default: boolean;
         };
+        behavior: import("vue-types").VueTypeDef<"normal" | "simplicity"> & {
+            default: "normal" | "simplicity";
+        };
     }>> & {
         onKeydown?: (...args: any[]) => any;
-        "onUpdate:modelValue"?: (...args: any[]) => any;
         onEnter?: (...args: any[]) => any;
+        "onUpdate:modelValue"?: (...args: any[]) => any;
         onRemove?: (...args: any[]) => any;
     }, {
         collapseTagRef: import("vue").Ref<any>;
@@ -486,7 +511,8 @@ declare const _default: import("vue").DefineComponent<{
     }, {}, {}, {}, {
         disabled: boolean;
         placeholder: string;
-        tagTheme: "" | "info" | "success" | "warning" | "danger";
+        tagTheme: "" | "info" | "success" | "danger" | "warning";
+        behavior: "normal" | "simplicity";
         selected: ISelected[];
         filterable: boolean;
         allowCreate: boolean;
@@ -502,6 +528,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>;
@@ -545,8 +572,8 @@ declare const _default: import("vue").DefineComponent<{
         } & {
             default: boolean;
         };
-        placement: import("vue-types").VueTypeValidableDef<"auto" | "auto-start" | "auto-end" | "top" | "right" | "bottom" | "left" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end"> & {
-            default: "auto" | "auto-start" | "auto-end" | "top" | "right" | "bottom" | "left" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end";
+        placement: import("vue-types").VueTypeValidableDef<"auto" | "auto-end" | "auto-start" | "bottom" | "bottom-end" | "bottom-start" | "left" | "left-end" | "left-start" | "right" | "right-end" | "right-start" | "top" | "top-end" | "top-start"> & {
+            default: "auto" | "auto-end" | "auto-start" | "bottom" | "bottom-end" | "bottom-start" | "left" | "left-end" | "left-start" | "right" | "right-end" | "right-start" | "top" | "top-end" | "top-start";
         };
         theme: import("vue-types").VueTypeValidableDef<string> & {
             default: string;
@@ -637,6 +664,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 +674,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;
@@ -661,8 +690,8 @@ declare const _default: import("vue").DefineComponent<{
     localSearchPlaceholder: import("vue").ComputedRef<string>;
     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<{
+    handleCreateCustomOption: (val: number | string, e: KeyboardEvent) => void;
+}, 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;
@@ -724,8 +753,8 @@ declare const _default: import("vue").DefineComponent<{
     multipleMode: import("vue-types").VueTypeDef<string> & {
         default: string;
     };
-    tagTheme: import("vue-types").VueTypeDef<"" | "info" | "success" | "warning" | "danger"> & {
-        default: "" | "info" | "success" | "warning" | "danger";
+    tagTheme: import("vue-types").VueTypeDef<"" | "info" | "success" | "danger" | "warning"> & {
+        default: "" | "info" | "success" | "danger" | "warning";
     };
     behavior: import("vue-types").VueTypeDef<"normal" | "simplicity"> & {
         default: "normal" | "simplicity";
@@ -805,8 +834,8 @@ declare const _default: import("vue").DefineComponent<{
         } & {
             default: boolean;
         };
-        placement: import("vue-types").VueTypeValidableDef<"auto" | "auto-start" | "auto-end" | "top" | "right" | "bottom" | "left" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end"> & {
-            default: "auto" | "auto-start" | "auto-end" | "top" | "right" | "bottom" | "left" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end";
+        placement: import("vue-types").VueTypeValidableDef<"auto" | "auto-end" | "auto-start" | "bottom" | "bottom-end" | "bottom-start" | "left" | "left-end" | "left-start" | "right" | "right-end" | "right-start" | "top" | "top-end" | "top-start"> & {
+            default: "auto" | "auto-end" | "auto-start" | "bottom" | "bottom-end" | "bottom-start" | "left" | "left-end" | "left-start" | "right" | "right-end" | "right-start" | "top" | "top-end" | "top-start";
         };
         theme: import("vue-types").VueTypeValidableDef<string> & {
             default: string;
@@ -944,6 +973,11 @@ declare const _default: import("vue").DefineComponent<{
     } & {
         default: boolean;
     };
+    disableFocusBehavior: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
     keepSearchValue: import("vue-types").VueTypeValidableDef<boolean> & {
         default: boolean;
     } & {
@@ -958,6 +992,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,16 +1013,17 @@ 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";
     disabled: boolean;
-    multiple: boolean;
     showOnInit: boolean;
+    multiple: boolean;
     placeholder: string;
     list: any[];
     loading: boolean;
-    tagTheme: "" | "info" | "success" | "warning" | "danger";
+    tagTheme: "" | "info" | "success" | "danger" | "warning";
     behavior: "normal" | "simplicity";
     selectedStyle: "checkbox" | "check";
     scrollHeight: number;
@@ -986,6 +1031,7 @@ declare const _default: import("vue").DefineComponent<{
     withValidate: boolean;
     noDataText: string;
     showSelectedIcon: boolean;
+    highlightKeyword: boolean;
     filterable: boolean;
     allowCreate: boolean;
     collapseTags: boolean;
@@ -1007,6 +1053,8 @@ declare const _default: import("vue").DefineComponent<{
     enableVirtualRender: boolean;
     allowEmptyValues: unknown[];
     autoFocus: boolean;
+    disableFocusBehavior: boolean;
     keepSearchValue: boolean;
+    searchWithPinyin: boolean;
 }, {}>;
 export default _default;

package/lib/select/select.less

@@ -96,14 +96,21 @@
     }
   }
 
-  &.is-focus.normal {
-    .@{bk-prefix}-select-trigger .@{bk-prefix}-select-tag.@{bk-prefix}-select-tag--default {
-      border-color: @primary-color;
-      box-shadow: 0px 0px 3px 0px #a3c5fd;
+  &.is-focus:not(.is-disabled) {
+    &.normal {
+      .@{bk-prefix}-select-trigger .@{bk-prefix}-select-tag {
+        border-color: @primary-color;
+        box-shadow: 0px 0px 3px 0px #a3c5fd;
+      }
+    }
+    &.simplicity {
+      .@{bk-prefix}-select-trigger .@{bk-prefix}-select-tag {
+        border-bottom-color: @primary-color;
+      }
     }
   }
 
-  &.is-focus .@{bk-prefix}-input--default {
+  &.is-focus .@{bk-prefix}-input {
     border-color: @primary-color;
     outline: 0;
     box-shadow: 0px 0px 3px 0px @input-shadow-color;
@@ -164,10 +171,32 @@
       width: auto;
       align-items: center;
 
+      &.is-simplicity {
+        background-color: transparent;
+        border-color: transparent;
+        border-bottom-color: @input-border-color;
+    
+        &:hover {
+          background-color: @input-block-color;
+          border-color: transparent;
+          border-bottom-color: @light-gray;
+          box-shadow: none;
+        }
+      }
+      
       &.has-prefix {
         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,14 +209,7 @@
         flex-wrap: wrap;
       }
 
-      &-wrapper {
-        display: flex;
-        align-items: center;
-        flex-wrap: wrap;
-        overflow: hidden;
-      }
-
-      &:not(.is-disabled):hover {
+      &:not(.is-disabled,.is-simplicity):hover {
         border-color: #979ba5;
       }
 
@@ -223,7 +245,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 +289,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,12 +353,35 @@
           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;
-          height: 32px;
+          min-height: 32px;
           padding: 0 12px;
-          line-height: 32px;
           color: #63656e;
           text-align: left;
           cursor: pointer;
@@ -360,15 +405,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 +439,11 @@
             }
 
             &.is-hover {
-              background-color: #f5f7fa;
+              background-color: @select-hover-color;
             }
 
             &:hover {
-              background-color: #f5f7fa;
+              background-color: @select-hover-color;
             }
           }
         }