bkui-vue 2.0.2-beta.57 → 2.0.2-beta.59

package/lib/cascader/index.js

@@ -1840,6 +1840,17 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
         }
       });
     };
+    // 监听store.config.multiple属性的变化，当切换单选/多选模式时需要重新初始化面板
+    (0,external_vue_.watch)(function () {
+      return store.value.config.multiple;
+    }, function (newVal, oldVal) {
+      if (newVal !== oldVal) {
+        // 当multiple属性变化时，重置面板状态
+        menus.list = [store.value.getNodes()];
+        activePath.value = [];
+        checkValue.value = [];
+      }
+    });
     var noDataText = t.value.noData;
     var emptyText = t.value.emptyText;
     /**
@@ -2460,8 +2471,7 @@ var Store = /*#__PURE__*/function () {
     var emit = _ref.emit,
       slots = _ref.slots;
     var t = (0,config_provider_namespaceObject.useLocale)('cascader');
-    var separator = props.separator,
-      multiple = props.multiple;
+    var separator = props.separator;
     // 用useHover自定义hook来处理鼠标hover状态
     var _useHover = (0,select_namespaceObject.useHover)(),
       isHover = _useHover.isHover,
@@ -2535,7 +2545,7 @@ var Store = /*#__PURE__*/function () {
     // 更新选中
     var updateValue = function updateValue(val) {
       // 更新多选情况下的选中标签
-      if (multiple) {
+      if (props.multiple) {
         store.value.setNodesCheck(val); // 同步节点选中的状态
         selectedTags.value = store.value.getCheckedNodes().filter(function (node) {
           return store.value.config.checkAnyLevel || node.isLeaf;
@@ -2677,6 +2687,22 @@ var Store = /*#__PURE__*/function () {
       deep: true,
       immediate: true
     });
+    // 监听multiple属性的变化，当切换单选/多选模式时需要重新初始化组件
+    (0,external_vue_.watch)(function () {
+      return props.multiple;
+    }, function (newVal, oldVal) {
+      if (newVal !== oldVal) {
+        // 重新初始化store
+        store.value = new src_store(props);
+        // 重置selectedTags和selectedText状态
+        selectedTags.value = [];
+        selectedText.value = '';
+        // 更新组件状态
+        updateValue(props.modelValue);
+      }
+    }, {
+      immediate: true
+    });
     // 定义overflowTagIndex变量，用于处理tag的折叠
     var tagList = (0,external_vue_.computed)(function () {
       return props.customTagsFillback ? props.customTagsFillback(props.modelValue, store.value.getFlattedNodes()) : selectedTags.value.map(function (item) {

package/lib/date-picker/date-picker.d.ts

@@ -168,7 +168,7 @@ declare const _default: import("vue").DefineComponent<{
     shortcut: import("vue").Ref<any>;
     onSelectionModeChange: import("vue").Ref<(_type: any) => SelectionModeType>;
     tmpValue: import("vue").Ref<any>;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("blur" | "change" | "focus" | "input" | "clear" | "update:modelValue" | "pick-success" | "pick-first" | "open-change" | "shortcut-change")[], "blur" | "change" | "focus" | "input" | "clear" | "update:modelValue" | "pick-success" | "pick-first" | "open-change" | "shortcut-change", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("blur" | "change" | "focus" | "input" | "clear" | "update:modelValue" | "pick-success" | "selection-mode-change" | "pick-first" | "open-change" | "shortcut-change")[], "blur" | "change" | "focus" | "input" | "clear" | "update:modelValue" | "pick-success" | "selection-mode-change" | "pick-first" | "open-change" | "shortcut-change", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     readonly type: {
         readonly type: import("vue").PropType<import("./interface").PickerTypeType>;
         readonly default: "date";
@@ -289,6 +289,7 @@ declare const _default: import("vue").DefineComponent<{
     onClear?: (...args: any[]) => any;
     "onUpdate:modelValue"?: (...args: any[]) => any;
     "onPick-success"?: (...args: any[]) => any;
+    "onSelection-mode-change"?: (...args: any[]) => any;
     "onPick-first"?: (...args: any[]) => any;
     "onOpen-change"?: (...args: any[]) => any;
     "onShortcut-change"?: (...args: any[]) => any;

package/lib/date-picker/index.d.ts

@@ -122,6 +122,7 @@ declare const BkDatePicker: {
         onClear?: (...args: any[]) => any;
         "onUpdate:modelValue"?: (...args: any[]) => any;
         "onPick-success"?: (...args: any[]) => any;
+        "onSelection-mode-change"?: (...args: any[]) => any;
         "onPick-first"?: (...args: any[]) => any;
         "onOpen-change"?: (...args: any[]) => any;
         "onShortcut-change"?: (...args: any[]) => any;
@@ -180,7 +181,7 @@ declare const BkDatePicker: {
         shortcut: import("vue").Ref<any>;
         onSelectionModeChange: import("vue").Ref<(_type: any) => import("./interface").SelectionModeType>;
         tmpValue: import("vue").Ref<any>;
-    }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("blur" | "change" | "focus" | "input" | "clear" | "update:modelValue" | "pick-success" | "pick-first" | "open-change" | "shortcut-change")[], import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & Readonly<import("vue").ExtractPropTypes<{
+    }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("blur" | "change" | "focus" | "input" | "clear" | "update:modelValue" | "pick-success" | "selection-mode-change" | "pick-first" | "open-change" | "shortcut-change")[], import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & Readonly<import("vue").ExtractPropTypes<{
         readonly type: {
             readonly type: import("vue").PropType<import("./interface").PickerTypeType>;
             readonly default: "date";
@@ -301,6 +302,7 @@ declare const BkDatePicker: {
         onClear?: (...args: any[]) => any;
         "onUpdate:modelValue"?: (...args: any[]) => any;
         "onPick-success"?: (...args: any[]) => any;
+        "onSelection-mode-change"?: (...args: any[]) => any;
         "onPick-first"?: (...args: any[]) => any;
         "onOpen-change"?: (...args: any[]) => any;
         "onShortcut-change"?: (...args: any[]) => any;
@@ -466,6 +468,7 @@ declare const BkDatePicker: {
         onClear?: (...args: any[]) => any;
         "onUpdate:modelValue"?: (...args: any[]) => any;
         "onPick-success"?: (...args: any[]) => any;
+        "onSelection-mode-change"?: (...args: any[]) => any;
         "onPick-first"?: (...args: any[]) => any;
         "onOpen-change"?: (...args: any[]) => any;
         "onShortcut-change"?: (...args: any[]) => any;
@@ -675,6 +678,7 @@ declare const BkDatePicker: {
     onClear?: (...args: any[]) => any;
     "onUpdate:modelValue"?: (...args: any[]) => any;
     "onPick-success"?: (...args: any[]) => any;
+    "onSelection-mode-change"?: (...args: any[]) => any;
     "onPick-first"?: (...args: any[]) => any;
     "onOpen-change"?: (...args: any[]) => any;
     "onShortcut-change"?: (...args: any[]) => any;
@@ -733,7 +737,7 @@ declare const BkDatePicker: {
     shortcut: import("vue").Ref<any>;
     onSelectionModeChange: import("vue").Ref<(_type: any) => import("./interface").SelectionModeType>;
     tmpValue: import("vue").Ref<any>;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("blur" | "change" | "focus" | "input" | "clear" | "update:modelValue" | "pick-success" | "pick-first" | "open-change" | "shortcut-change")[], "blur" | "change" | "focus" | "input" | "clear" | "update:modelValue" | "pick-success" | "pick-first" | "open-change" | "shortcut-change", {
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("blur" | "change" | "focus" | "input" | "clear" | "update:modelValue" | "pick-success" | "selection-mode-change" | "pick-first" | "open-change" | "shortcut-change")[], "blur" | "change" | "focus" | "input" | "clear" | "update:modelValue" | "pick-success" | "selection-mode-change" | "pick-first" | "open-change" | "shortcut-change", {
     readonly type: import("./interface").PickerTypeType;
     readonly disabled: boolean;
     readonly placement: import("@popperjs/core").ComputedPlacement;

package/lib/date-picker/index.js

@@ -5035,7 +5035,7 @@ var dateRangePanelProps = {
 /* harmony default export */ const date_range = ((0,external_vue_.defineComponent)({
   name: 'DateRangePanel',
   props: dateRangePanelProps,
-  emits: ['pick', 'pick-success', 'pick-clear', 'pick-click', 'pick-first'],
+  emits: ['pick', 'pick-success', 'pick-clear', 'pick-click', 'pick-first', 'selection-mode-change'],
   setup: function setup(props, _ref) {
     var slots = _ref.slots,
       emit = _ref.emit;
@@ -5330,6 +5330,8 @@ var dateRangePanelProps = {
       var leftMonth = state.leftPanelDate.getMonth();
       var rightMonth = state.rightPanelDate.getMonth();
       var isSameYear = state.leftPanelDate.getFullYear() === state.rightPanelDate.getFullYear();
+      // 抛出选择时间/选择日期面板切换事件
+      emit('selection-mode-change', v);
       if (v === 'date' && isSameYear && leftMonth === rightMonth) {
         changePanelDate('right', 'Month', 1);
       }
@@ -5761,7 +5763,7 @@ function date_picker_objectSpread(e) { for (var r = 1; r < arguments.length; r++
     clickoutside: src.clickoutside
   },
   props: datePickerProps,
-  emits: ['open-change', 'input', 'change', 'update:modelValue', 'clear', 'shortcut-change', 'pick-success', 'pick-first', 'blur', 'focus'],
+  emits: ['open-change', 'input', 'change', 'update:modelValue', 'clear', 'shortcut-change', 'pick-success', 'pick-first', 'blur', 'focus', 'selection-mode-change'],
   // slots: ['header'],
   slots: Object,
   setup: function setup(props, _ref) {
@@ -5824,6 +5826,8 @@ function date_picker_objectSpread(e) { for (var r = 1; r < arguments.length; r++
       }
       // return ['year', 'month', 'date', 'time'].indexOf(type) > -1 && type;
       state.selectionMode = ['year', 'month', 'date', 'time'].indexOf(type) > -1 && type;
+      // 抛出选择时间/选择日期面板切换事件，处理不同面板自定义交互
+      emit('selection-mode-change', _type);
       return state.selectionMode;
     }
     var publicVModelValue = (0,external_vue_.computed)(function () {

package/lib/date-picker/panel/date-range.d.ts

@@ -200,7 +200,7 @@ declare const _default: import("vue").DefineComponent<{
     upToNowEnable: import("vue").Ref<boolean>;
     dates: import("vue").Ref<any>;
     selectedIndex: import("vue").Ref<number>;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("pick-clear" | "pick-success" | "pick" | "pick-click" | "pick-first")[], "pick-clear" | "pick-success" | "pick" | "pick-click" | "pick-first", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<ExtractPropTypes<{
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("pick-clear" | "pick-success" | "pick" | "pick-click" | "selection-mode-change" | "pick-first")[], "pick-clear" | "pick-success" | "pick" | "pick-click" | "selection-mode-change" | "pick-first", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<ExtractPropTypes<{
     readonly modelValue: {
         readonly type: PropType<DatePickerValueType>;
     };
@@ -267,6 +267,7 @@ declare const _default: import("vue").DefineComponent<{
     "onPick-success"?: (...args: any[]) => any;
     onPick?: (...args: any[]) => any;
     "onPick-click"?: (...args: any[]) => any;
+    "onSelection-mode-change"?: (...args: any[]) => any;
     "onPick-first"?: (...args: any[]) => any;
 }, {
     readonly type: PickerTypeType;

package/lib/index.js

@@ -3,5 +3,5 @@ export * from './hooks';
 export { default } from './preset';
 export * from './config-provider';
 export * from './directives';
-export const version = "2.0.2-beta.57";
+export const version = "2.0.2-beta.59";
 window.__bkui_vue_version__ = version;

package/lib/input/index.js

@@ -1890,7 +1890,6 @@ var inputEmitEventsType = (_inputEmitEventsType = {}, _defineProperty(_definePro
     // 事件句柄生成器
     function eventHandler(eventName) {
       return function (e) {
-        // console.error('eventNameeventName', eventName);
         props.stopPropagation && e.stopPropagation();
         if (showMaxLimit.value && !props.overMaxLengthLimit) {
           var limit = getValueLimits(e.target.value);
@@ -1905,14 +1904,12 @@ var inputEmitEventsType = (_inputEmitEventsType = {}, _defineProperty(_definePro
           }
         }
         if (eventName === EVENTS.KEYDOWN && (e.code === 'Enter' || e.key === 'Enter' || e.keyCode === 13)) {
-          // console.error('KEYDOWN Enter', handleNumber(e.target.value, 0), e.target.value);
           ctx.emit(EVENTS.ENTER, isNumberInput.value ? handleNumber(e.target.value, 0) : e.target.value, e);
         }
         if (isCNInput.value && [EVENTS.INPUT, EVENTS.CHANGE, EVENTS.KEYDOWN].some(function (e) {
           return eventName === e;
         })) return;
         if (eventName === EVENTS.INPUT) {
-          // console.error('INPUT', e.target.value);
           // ctx.emit(EVENTS.UPDATE, isNumberInput.value ? handleNumber(e.target.value, 0) : e.target.value, e);
           ctx.emit(EVENTS.UPDATE, isNumberInput.value ?
           // 这里不直接使用 handleNumber，是因为 handleNumber 里有 min 和 max 的判断
@@ -1928,16 +1925,13 @@ var inputEmitEventsType = (_inputEmitEventsType = {}, _defineProperty(_definePro
             }
             return (+val).toFixed(precision);
           }() : e.target.value, e);
-        } else if (eventName === EVENTS.CHANGE && isNumberInput.value && e.target.value !== '') {
-          // console.error('CHANGE', handleNumber(e.target.value, 0), e.target.value);
+        } else if (eventName === EVENTS.CHANGE && isNumberInput.value) {
           var _val = handleNumber(e.target.value, 0);
           ctx.emit(EVENTS.UPDATE, _val, e);
           ctx.emit(eventName, _val, e);
           return;
         }
-        // console.error('e.target.value', e.target.value);
         ctx.emit(eventName, isNumberInput.value ? handleNumber(e.target.value, 0) : e.target.value, e);
-        // ctx.emit(eventName, e.target.value, e);
       };
     }
     var _map = [EVENTS.KEYUP, EVENTS.KEYDOWN, EVENTS.KEYPRESS, EVENTS.PASTE, EVENTS.CHANGE, EVENTS.INPUT].map(eventHandler),

package/lib/transfer/index.d.ts

@@ -53,11 +53,6 @@ declare const Transfer: {
         } & {
             default: string;
         };
-        showOverflowTips: import("vue-types").VueTypeValidableDef<boolean> & {
-            default: boolean;
-        } & {
-            default: boolean;
-        };
         searchable: import("vue-types").VueTypeValidableDef<boolean> & {
             default: boolean;
         } & {
@@ -146,11 +141,6 @@ declare const Transfer: {
         } & {
             default: string;
         };
-        showOverflowTips: import("vue-types").VueTypeValidableDef<boolean> & {
-            default: boolean;
-        } & {
-            default: boolean;
-        };
         searchable: import("vue-types").VueTypeValidableDef<boolean> & {
             default: boolean;
         } & {
@@ -187,7 +177,6 @@ declare const Transfer: {
         sortable: boolean;
         settingKey: string;
         sortKey: string;
-        showOverflowTips: boolean;
         searchable: boolean;
         sourceList: any[];
         targetList: any[];
@@ -228,11 +217,6 @@ declare const Transfer: {
         } & {
             default: string;
         };
-        showOverflowTips: import("vue-types").VueTypeValidableDef<boolean> & {
-            default: boolean;
-        } & {
-            default: boolean;
-        };
         searchable: import("vue-types").VueTypeValidableDef<boolean> & {
             default: boolean;
         } & {
@@ -301,7 +285,6 @@ declare const Transfer: {
         sortable: boolean;
         settingKey: string;
         sortKey: string;
-        showOverflowTips: boolean;
         searchable: boolean;
         sourceList: any[];
         targetList: any[];
@@ -339,11 +322,6 @@ declare const Transfer: {
     } & {
         default: string;
     };
-    showOverflowTips: import("vue-types").VueTypeValidableDef<boolean> & {
-        default: boolean;
-    } & {
-        default: boolean;
-    };
     searchable: import("vue-types").VueTypeValidableDef<boolean> & {
         default: boolean;
     } & {
@@ -412,7 +390,6 @@ declare const Transfer: {
     sortable: boolean;
     settingKey: string;
     sortKey: string;
-    showOverflowTips: boolean;
     searchable: boolean;
     sourceList: any[];
     targetList: any[];

package/lib/transfer/index.js

@@ -8,6 +8,7 @@ import * as __WEBPACK_EXTERNAL_MODULE_bkui_vue_lib_config_provider_fe8577a3__ fr
 import * as __WEBPACK_EXTERNAL_MODULE_bkui_vue_lib_icon_a97c79c3__ from "../icon";
 import * as __WEBPACK_EXTERNAL_MODULE_bkui_vue_lib_input_d525237e__ from "../input";
 import "../input/input.less";
+import * as __WEBPACK_EXTERNAL_MODULE_bkui_vue_lib_overflow_title_051a85a5__ from "../overflow-title";
 /******/ // The require scope
 /******/ var __webpack_require__ = {};
 /******/ 
@@ -106,6 +107,10 @@ const input_namespaceObject = input_x({ ["default"]: () => __WEBPACK_EXTERNAL_MO
 var input_less_x = y => { var x = {}; __webpack_require__.d(x, y); return x; }
 var input_less_y = x => () => x
 const input_less_namespaceObject = input_less_x({  });
+;// CONCATENATED MODULE: external "../overflow-title"
+var overflow_title_x = y => { var x = {}; __webpack_require__.d(x, y); return x; }
+var overflow_title_y = x => () => x
+const overflow_title_namespaceObject = overflow_title_x({ ["OverflowTitle"]: () => __WEBPACK_EXTERNAL_MODULE_bkui_vue_lib_overflow_title_051a85a5__.OverflowTitle });
 ;// CONCATENATED MODULE: ../../packages/transfer/src/const.ts
 /*
  * Tencent is pleased to support the open source community by making
@@ -179,8 +184,6 @@ var transferProps = {
   displayKey: shared_namespaceObject.PropTypes.string.def('value'),
   // 排序所依据的key(当list为普通数组时可不传，默认按照index值排序)
   sortKey: shared_namespaceObject.PropTypes.string.def('value'),
-  // 内容超出是否显示tooltip
-  showOverflowTips: shared_namespaceObject.PropTypes.bool.def(false),
   // 是否开启搜索
   searchable: shared_namespaceObject.PropTypes.bool.def(false),
   // 是否开启排序功能
@@ -232,6 +235,7 @@ var transferProps = {
 
 
 
+
 // 生成数据
 function _isSlot(s) {
   return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !(0,external_vue_namespaceObject.isVNode)(s);
@@ -557,9 +561,14 @@ function useSelectListSearch(selectList, displayCode) {
           'is-disabled': item.disabled
         }]
       }, [(0,external_vue_namespaceObject.createVNode)("span", {
-        "class": "content-text",
-        "title": item[_this.displayCode]
-      }, [item[_this.displayCode]]), !multiple && (0,external_vue_namespaceObject.createVNode)("span", {
+        "class": "content-text"
+      }, [(0,external_vue_namespaceObject.createVNode)(overflow_title_namespaceObject.OverflowTitle, {
+        "resizeable": true
+      }, {
+        "default": function _default() {
+          return [item[_this.displayCode]];
+        }
+      })]), !multiple && (0,external_vue_namespaceObject.createVNode)("span", {
         "class": "icon-wrapper"
       }, [isLeft ? // <ArrowsRight class={`${this.resolveClassName('icon')} icon-move`} />
       (0,external_vue_namespaceObject.createVNode)(icon_namespaceObject.ArrowsRight, {
@@ -587,14 +596,15 @@ function useSelectListSearch(selectList, displayCode) {
         }
       }, _isSlot(_slot = list.map(function (item) {
         var _this$$slots$slotName, _this$$slots$slotName2, _this$$slots;
-        return (0,external_vue_namespaceObject.createVNode)("div", null, [(0,external_vue_namespaceObject.createVNode)(checkbox_namespaceObject["default"], {
+        return (0,external_vue_namespaceObject.createVNode)(checkbox_namespaceObject["default"], {
+          "key": item[_this.settingCode],
           "class": "checkbox-item",
           "label": item[_this.settingCode]
         }, {
           "default": function _default() {
             return [(_this$$slots$slotName = (_this$$slots$slotName2 = (_this$$slots = _this.$slots)[slotName]) === null || _this$$slots$slotName2 === void 0 ? void 0 : _this$$slots$slotName2.call(_this$$slots, item)) !== null && _this$$slots$slotName !== void 0 ? _this$$slots$slotName : getDefaultListHtml(item, isLeft)];
           }
-        })]);
+        });
       })) ? _slot : {
         "default": function _default() {
           return [_slot];

package/lib/transfer/props.d.ts

@@ -27,11 +27,6 @@ export declare const transferProps: {
     } & {
         default: string;
     };
-    showOverflowTips: import("vue-types").VueTypeValidableDef<boolean> & {
-        default: boolean;
-    } & {
-        default: boolean;
-    };
     searchable: import("vue-types").VueTypeValidableDef<boolean> & {
         default: boolean;
     } & {

package/lib/transfer/transfer.css

@@ -1,7 +1,7 @@
 .bk-transfer {
   display: flex;
-  justify-content: center;
   align-items: center;
+  justify-content: center;
   font-size: 14px;
 }
 .bk-transfer .bk-transfer-icon {
@@ -14,6 +14,8 @@
 }
 .bk-transfer .transfer-button-group .transfer-button {
   display: flex;
+  align-items: center;
+  justify-content: center;
   width: 24px;
   height: 24px;
   color: white;
@@ -21,8 +23,6 @@
   background-color: #3a84ff;
   border: 1px solid #3a84ff;
   border-radius: 2px;
-  align-items: center;
-  justify-content: center;
 }
 .bk-transfer .transfer-button-group .transfer-button:first-child {
   margin-bottom: 8px;
@@ -38,11 +38,11 @@
 }
 .bk-transfer .source-list,
 .bk-transfer .target-list {
-  flex: 1;
   display: flex;
+  flex: 1;
   flex-direction: column;
-  height: 400px;
   min-width: 200px;
+  height: 400px;
   overflow: hidden;
   background-color: white;
   border: 1px solid #dcdee5;
@@ -86,8 +86,8 @@
   width: calc(100% - 32px);
   height: 30px;
   margin: 8px 16px 0;
-  border-bottom: 1px solid #dcdee5;
   border-width: 0 0 1px 0;
+  border-bottom: 1px solid #dcdee5;
   border-radius: 0;
   outline: none;
 }
@@ -107,8 +107,8 @@
 }
 .bk-transfer .source-list .empty,
 .bk-transfer .target-list .empty {
-  flex: 1;
   display: flex;
+  flex: 1;
   align-items: center;
   justify-content: center;
   padding-bottom: 30px;
@@ -133,11 +133,12 @@
 .bk-transfer .source-list .content .checkbox-item,
 .bk-transfer .target-list .content .checkbox-item {
   display: flex;
+  align-items: center;
   height: 32px;
   padding: 0 16px;
   margin-bottom: 4px;
+  margin-left: 0;
   cursor: pointer;
-  align-items: center;
 }
 .bk-transfer .source-list .content li.custom-item:hover:not(.is-disabled),
 .bk-transfer .target-list .content li.custom-item:hover:not(.is-disabled),
@@ -202,6 +203,23 @@
   color: #c4c6cc;
   cursor: not-allowed;
 }
+.bk-transfer .source-list .content li.custom-item .bk-checkbox-input,
+.bk-transfer .target-list .content li.custom-item .bk-checkbox-input,
+.bk-transfer .source-list .content li .item-content .bk-checkbox-input,
+.bk-transfer .target-list .content li .item-content .bk-checkbox-input,
+.bk-transfer .source-list .content .checkbox-item .bk-checkbox-input,
+.bk-transfer .target-list .content .checkbox-item .bk-checkbox-input {
+  flex: none;
+}
+.bk-transfer .source-list .content li.custom-item .bk-checkbox-label,
+.bk-transfer .target-list .content li.custom-item .bk-checkbox-label,
+.bk-transfer .source-list .content li .item-content .bk-checkbox-label,
+.bk-transfer .target-list .content li .item-content .bk-checkbox-label,
+.bk-transfer .source-list .content .checkbox-item .bk-checkbox-label,
+.bk-transfer .target-list .content .checkbox-item .bk-checkbox-label {
+  flex: 1;
+  overflow: hidden;
+}
 .bk-transfer .source-list .content .checkbox-item .item-content,
 .bk-transfer .target-list .content .checkbox-item .item-content {
   display: flex;

package/lib/transfer/transfer.d.ts

@@ -52,11 +52,6 @@ declare const _default: import("vue").DefineComponent<{
     } & {
         default: string;
     };
-    showOverflowTips: import("vue-types").VueTypeValidableDef<boolean> & {
-        default: boolean;
-    } & {
-        default: boolean;
-    };
     searchable: import("vue-types").VueTypeValidableDef<boolean> & {
         default: boolean;
     } & {
@@ -142,11 +137,6 @@ declare const _default: import("vue").DefineComponent<{
     } & {
         default: string;
     };
-    showOverflowTips: import("vue-types").VueTypeValidableDef<boolean> & {
-        default: boolean;
-    } & {
-        default: boolean;
-    };
     searchable: import("vue-types").VueTypeValidableDef<boolean> & {
         default: boolean;
     } & {
@@ -183,7 +173,6 @@ declare const _default: import("vue").DefineComponent<{
     sortable: boolean;
     settingKey: string;
     sortKey: string;
-    showOverflowTips: boolean;
     searchable: boolean;
     sourceList: any[];
     targetList: any[];

package/lib/transfer/transfer.less

@@ -4,8 +4,8 @@
 
 .@{bk-prefix}-transfer {
   display: flex;
-  justify-content: center;
   align-items: center;
+  justify-content: center;
   font-size: 14px;
 
   .@{bk-prefix}-transfer-icon {
@@ -19,6 +19,8 @@
 
     .transfer-button {
       display: flex;
+      align-items: center;
+      justify-content: center;
       width: 24px;
       height: 24px;
       color: @white-color;
@@ -26,8 +28,6 @@
       background-color: @primary-color;
       border: 1px solid @primary-color;
       border-radius: 2px;
-      align-items: center;
-      justify-content: center;
 
       &:first-child {
         margin-bottom: 8px;
@@ -48,11 +48,11 @@
 
   .source-list,
   .target-list {
-    flex: 1;
     display: flex;
+    flex: 1;
     flex-direction: column;
-    height: 400px;
     min-width: 200px;
+    height: 400px;
     overflow: hidden;
     background-color: @white-color;
     border: 1px solid @disable-color;
@@ -94,8 +94,8 @@
       width: calc(100% - 32px);
       height: 30px;
       margin: 8px 16px 0;
-      border-bottom: 1px solid @disable-color;
       border-width: 0 0 1px 0;
+      border-bottom: 1px solid @disable-color;
       border-radius: 0;
       outline: none;
 
@@ -115,8 +115,8 @@
     }
 
     .empty {
-      flex: 1;
       display: flex;
+      flex: 1;
       align-items: center;
       justify-content: center;
       padding-bottom: 30px;
@@ -138,11 +138,12 @@
       li .item-content,
       .checkbox-item {
         display: flex;
+        align-items: center;
         height: 32px;
         padding: 0 16px;
         margin-bottom: 4px;
+        margin-left: 0;
         cursor: pointer;
-        align-items: center;
 
         &:hover:not(.is-disabled) {
           color: @primary-color;
@@ -178,6 +179,15 @@
           color: @light-gray;
           cursor: not-allowed;
         }
+
+        .bk-checkbox-input {
+          flex: none;
+        }
+
+        .bk-checkbox-label {
+          flex: 1;
+          overflow: hidden;
+        }
       }
 
       .checkbox-item {