bkui-vue 0.0.1-beta.3 → 0.0.1-beta.30

package/lib/transfer/index.js

@@ -0,0 +1 @@
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("../shared"),require("vue"),require("../icon/"),require("../input")):"function"==typeof define&&define.amd?define(["exports","../shared","vue","../icon/","../input"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).bkuiVue={},e.Shared,e.Vue,e._,e.Input)}(this,(function(e,t,r,n,o){"use strict";function a(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var u=a(o);function l(e){return e&&e.__esModule&&Object.prototype.hasOwnProperty.call(e,"default")?e.default:e}var s={exports:{}},i={exports:{}};!function(e){e.exports=function(e){if(Array.isArray(e))return e},e.exports.__esModule=!0,e.exports.default=e.exports}(i);var c={exports:{}};!function(e){e.exports=function(e,t){var r=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=r){var n,o,a=[],u=!0,l=!1;try{for(r=r.call(e);!(u=(n=r.next()).done)&&(a.push(n.value),!t||a.length!==t);u=!0);}catch(e){l=!0,o=e}finally{try{u||null==r.return||r.return()}finally{if(l)throw o}}return a}},e.exports.__esModule=!0,e.exports.default=e.exports}(c);var f={exports:{}},p={exports:{}};!function(e){e.exports=function(e,t){(null==t||t>e.length)&&(t=e.length);for(var r=0,n=new Array(t);r<t;r++)n[r]=e[r];return n},e.exports.__esModule=!0,e.exports.default=e.exports}(p),function(e){var t=p.exports;e.exports=function(e,r){if(e){if("string"==typeof e)return t(e,r);var n=Object.prototype.toString.call(e).slice(8,-1);return"Object"===n&&e.constructor&&(n=e.constructor.name),"Map"===n||"Set"===n?Array.from(e):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?t(e,r):void 0}},e.exports.__esModule=!0,e.exports.default=e.exports}(f);var d={exports:{}};!function(e){e.exports=function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")},e.exports.__esModule=!0,e.exports.default=e.exports}(d),function(e){var t=i.exports,r=c.exports,n=f.exports,o=d.exports;e.exports=function(e,a){return t(e)||r(e,a)||n(e,a)||o()},e.exports.__esModule=!0,e.exports.default=e.exports}(s);var v=l(s.exports),h={exports:{}},y={exports:{}};!function(e){var t=p.exports;e.exports=function(e){if(Array.isArray(e))return t(e)},e.exports.__esModule=!0,e.exports.default=e.exports}(y);var x={exports:{}};!function(e){e.exports=function(e){if("undefined"!=typeof Symbol&&null!=e[Symbol.iterator]||null!=e["@@iterator"])return Array.from(e)},e.exports.__esModule=!0,e.exports.default=e.exports}(x);var g={exports:{}};!function(e){e.exports=function(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")},e.exports.__esModule=!0,e.exports.default=e.exports}(g),function(e){var t=y.exports,r=x.exports,n=f.exports,o=g.exports;e.exports=function(e){return t(e)||r(e)||n(e)||o()},e.exports.__esModule=!0,e.exports.default=e.exports}(h);var m=l(h.exports);t.PropTypes.string,t.PropTypes.string,t.PropTypes.string,t.PropTypes.string,t.PropTypes.bool,t.PropTypes.bool,t.PropTypes.string,t.PropTypes.bool;var L=r.defineComponent({name:"Transfer",props:{title:{type:Array,default:function(){return[]}},extCls:{type:String,default:""},searchPlaceholder:{type:String,default:""},settingKey:{type:String,default:"id"},displayKey:{type:String,default:"value"},sortKey:{type:String,default:""},showOverflowTips:{type:Boolean,default:!1},searchable:{type:Boolean,default:!1},sortable:{type:Boolean,default:!1},sourceList:{type:Array,default:function(){return[]}},targetList:{type:Array,default:function(){return[]}},emptyContent:{type:Array,default:function(){return[]}}},emits:["change"],slots:["left-header","right-header","source-option","target-option","left-empty-content","right-empty-content"],setup:function(e,n){var o=n.emit,a=[],u=e.sortKey,l=e.sortable,s=r.ref(""),i=r.ref(null),c=r.ref([]),f=r.ref([]),p=r.ref(-1),d=r.ref(-1),h=r.computed((function(){return e.sourceList&&Array.isArray(e.sourceList)?-1!==e.sourceList.toString().indexOf("[object Object]"):"empty"})),y=r.computed((function(){return h.value?e.settingKey:"index"})),x=r.computed((function(){return h.value?e.displayKey:"value"})),g=r.computed((function(){return s.value?c.value.filter((function(e){return!t.isEmpty(e[x.value])&&String(e[x.value]).indexOf(s.value)>-1})):c.value}));r.watch((function(){return e.sourceList}),(function(){"empty"!==h.value&&(L(),V())}),{deep:!0}),r.watch((function(){return e.targetList}),(function(){L(),V()}),{deep:!0}),r.watch((function(){return[x.value,y.value]}),(function(){L()})),r.watch((function(){return e.sortKey}),(function(e){u=e,V()})),r.watch((function(){return e.sortable}),(function(e){l=e,V()}));var L=function(){"empty"!==h.value&&(h.value?_():b())},b=function(){if(!e.targetList.length||e.targetList.length>e.sourceList.length){for(var t,r=[],n=0;n<e.sourceList.length;n++)r.push({index:n,value:e.sourceList[n]});c.value=[].concat(r),(t=f.value).splice.apply(t,[0,f.value.length].concat([])),o("change",c.value,[],[])}else{for(var a=[],u=[],l=0;l<e.sourceList.length;l++)a.push({index:l,value:e.sourceList[l]});e.targetList.forEach((function(e){var t=a.find((function(t){return t.value===e}));t&&u.push(t)})),f.value=[].concat(u);var s=a.filter((function(e){return u.every((function(t){return t.index!==e.index}))}));c.value=m(s),o("change",c.value,m(S(f.value,!1)),[])}},_=function(){if(!e.targetList.length||e.targetList.length>e.sourceList.length){var t;(t=c.value).splice.apply(t,[0,c.value.length].concat(m(e.sourceList))),f.value=[],o("change",c.value,[],[])}else{var r=e.sourceList.filter((function(t){return e.targetList.every((function(e){return e!==t[y.value]}))})),n=[];e.sourceList.forEach((function(t){e.targetList.forEach((function(e){t[y.value]===e&&n.push(t)}))})),f.value=[].concat(n),c.value=m(r);var a=m(S(f.value));o("change",c.value,f.value,a)}},V=function(){var t=[];if(h.value)l||(u=""),t=m(e.sourceList);else{u=l?"index":"";for(var r=0;r<e.sourceList.length;r++)t.push({index:r,value:e.sourceList[r]})}if(u){var n=[];if(t.forEach((function(e){n.push(e[u])})),(a=[].concat(n)).length===e.sourceList.length){var o=m(c.value);c.value=m(M(o,u,a))}}},w=function(){var e=c.value,t=h.value?f.value:m(S(f.value,!1)),r=h.value?m(S(f.value)):[];o("change",e,t,r)},S=function(e){var t=!(arguments.length>1&&void 0!==arguments[1])||arguments[1],r=[];if(!e.length)return[];var n=m(e);return n.forEach((function(e){if(t)for(var n=0,o=Object.entries(e);n<o.length;n++){var a=v(o[n],2),u=a[0],l=a[1];u===y.value&&r.push(l)}else r.push(e.value)})),r},M=function(e,t,r){var n=r;return e.sort((function(e,r){return n.indexOf(e[t])-n.indexOf(r[t])>=0}))},N=function(e){c.value=c.value.filter((function(t){return t[y.value]!==e[y.value]}))};return"empty"!==h.value&&(h.value?_():b(),V()),{keyword:s,transferRef:i,dataList:c,allToRight:function(){p.value=-1;var t=g.value,r=f.value;t.forEach((function(e){r.push(e),N(e)})),a.length===e.sourceList.length?f.value=m(M(r,u,a)):f.value=m(r),w()},allToLeft:function(){d.value=-1;for(var t=f.value,r=c.value;t.length;){var n=t.shift();r.push(n),a.length===e.sourceList.length?c.value=m(M(r,u,a)):c.value=m(r)}w()},displayDataList:g,displayCode:x,leftHoverIndex:p,rightHoverIndex:d,handleItemMouseEvent:function(e,t,r,n){t.preventDefault(),t.stopPropagation();var o="over"===e?n:-1;r?p.value=o:d.value=o},handleItemClick:function(t,r,n){t.preventDefault(),t.stopPropagation(),n?p.value=-1:d.value=-1;var o=n?g.value[r]:f.value.splice(r,1)[0],l=n?f.value:c.value;l.push(o),n&&N(o);var s=a.length===e.sourceList.length?m(M(l,u,a)):m(l);n?f.value=m(s):c.value=m(s),w()},hasSelectedList:f}},render:function(){var e=this,t=this.$props,o=t.extCls,a=t.title,l=t.emptyContent,s=t.searchable,i=t.searchPlaceholder,c=function(t){var n,o,u="left-header"===t,l="".concat(u?null!==(n=a[0])&&void 0!==n?n:"左侧列表":null!==(o=a[1])&&void 0!==o?o:"右侧列表"),s=u?!e.dataList.length:!e.hasSelectedList.length;return e.$slots[t]?r.createVNode("div",{class:"slot-header"},[r.createVNode("div",{class:"slot-content"},[e.$slots[t]()])]):r.createVNode("div",{class:"header"},["".concat(l,"（共").concat(e.dataList.length,"条）"),r.createVNode("span",{class:{disabled:s},onClick:function(){return u&&e.dataList.length&&e.allToRight(),void(!u&&e.hasSelectedList.length&&e.allToLeft())}},[u?"全部添加":"清空"])])},f=function(t,o){var a=!(arguments.length>2&&void 0!==arguments[2])||arguments[2],u=a?e.leftHoverIndex:e.rightHoverIndex;return r.createVNode("div",{class:"item-content"},[r.createVNode("span",{class:"content-text",title:t[e.displayCode]},[t[e.displayCode]]),r.createVNode("span",{class:["icon-wrapper",o===u?"hover":""]},[a?r.createVNode(n.ArrowsRight,{class:"bk-icon"},null):r.createVNode(n.Error,{class:"bk-icon"},null)])])},p=function(t){var n="left"===t,o=n?e.displayDataList:e.hasSelectedList,a=n?"source-option":"target-option",u=n?"left-empty-content":"right-empty-content";return o.length?r.createVNode("ul",{class:["content",s&&n?"is-search":""]},[o.map((function(t,o){var u,l,s;return r.createVNode("li",{key:o,class:[e.$slots[a]?"custom-item":""],onClick:function(t){return e.handleItemClick(t,o,n)},onMouseover:function(t){return e.handleItemMouseEvent("over",t,n,o)},onMouseleave:function(t){return e.handleItemMouseEvent("leave",t,n,o)}},[null!==(s=null===(l=(u=e.$slots)[a])||void 0===l?void 0:l.call(u,t))&&void 0!==s?s:f(t,o,n)])}))]):function(t){var n,o="left-empty-content"===t,a=null!==(n=o?l[0]:l[1])&&void 0!==n?n:o?"无数据":"未选择任何项";return e.$slots[t]?r.createVNode("div",null,[e.$slots[t]()]):r.createVNode("div",{class:"empty"},[a])}(u)};return r.createVNode("div",{class:["bk-transfer",o],ref:"transferRef"},[r.createVNode("div",{class:"source-list"},[c("left-header"),s&&r.createVNode(u.default,{modelValue:e.keyword,"onUpdate:modelValue":function(t){return e.keyword=t},class:"transfer-search-input",clearable:!0,placeholder:i||"请输入搜索关键字",type:"search","left-icon":"bk-icon icon-search"},null),p("left")]),r.createVNode("div",{class:"transfer"},null),r.createVNode("div",{class:"target-list"},[c("right-header"),p("right")])])}}),b=t.withInstall(L);e.default=b,Object.defineProperty(e,"__esModule",{value:!0})}));

package/lib/transfer/transfer.css

@@ -0,0 +1,158 @@
+/* 边框色 */
+/* 按钮、表单边框颜色、禁用时文本颜色 */
+/* 表格头部背景色、禁用底色 */
+/* 大面积背景色 */
+/* 重点表示、强调、链接以及带有明确指示性 */
+/* 正常尺寸图标 */
+.bk-transfer {
+  position: relative;
+  display: flex;
+  font-size: 14px;
+  flex-direction: row;
+  justify-content: center;
+}
+.bk-transfer .transfer {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 30px;
+  height: 30px;
+  background: url('@bkui-vue/styles/images/transfer.png') no-repeat center center;
+  transform: translate(-50%, -50%);
+}
+.bk-transfer .source-list,
+.bk-transfer .target-list {
+  height: 400px;
+  min-width: 200px;
+  overflow: hidden;
+  background-color: #fff;
+  border: 1px solid #dde4eb;
+  border-radius: 2px;
+  flex: 1;
+}
+.bk-transfer .source-list .slot-header,
+.bk-transfer .target-list .slot-header {
+  position: relative;
+  height: 43px;
+  padding: 0 20px;
+  line-height: 43px;
+  background-color: #fafbfd;
+  border-bottom: 1px solid #dde4eb;
+}
+.bk-transfer .source-list .slot-header .slot-content,
+.bk-transfer .target-list .slot-header .slot-content {
+  position: relative;
+}
+.bk-transfer .source-list .header,
+.bk-transfer .target-list .header {
+  position: relative;
+  height: 43px;
+  padding: 0 20px;
+  line-height: 43px;
+  background-color: #fafbfd;
+  border-bottom: 1px solid #dde4eb;
+}
+.bk-transfer .source-list .header span,
+.bk-transfer .target-list .header span {
+  position: absolute;
+  right: 10px;
+  font-size: 12px;
+  color: #3a84ff;
+  cursor: pointer;
+}
+.bk-transfer .source-list .header span.disabled,
+.bk-transfer .target-list .header span.disabled {
+  color: #c4c6cc;
+  cursor: not-allowed;
+}
+.bk-transfer .source-list .empty,
+.bk-transfer .target-list .empty {
+  position: relative;
+  top: 40%;
+  width: 100%;
+  color: #c4c6cc;
+  text-align: center;
+  cursor: default;
+}
+.bk-transfer .source-list .content,
+.bk-transfer .target-list .content {
+  position: relative;
+  max-height: calc(100% - 50px);
+  padding: 0;
+  margin: 6px 0;
+  overflow-y: auto;
+}
+.bk-transfer .source-list .content.is-search,
+.bk-transfer .target-list .content.is-search {
+  max-height: calc(100% - 86px);
+}
+.bk-transfer .source-list .content li.custom-item,
+.bk-transfer .target-list .content li.custom-item,
+.bk-transfer .source-list .content li .item-content,
+.bk-transfer .target-list .content li .item-content {
+  position: relative;
+  display: flex;
+  height: 40px;
+  padding: 0 20px;
+  line-height: 40px;
+  list-style: none;
+  cursor: pointer;
+  align-items: center;
+}
+.bk-transfer .source-list .content li.custom-item:hover,
+.bk-transfer .target-list .content li.custom-item:hover,
+.bk-transfer .source-list .content li .item-content:hover,
+.bk-transfer .target-list .content li .item-content:hover {
+  color: #3a84ff;
+  background-color: #eef6fe;
+}
+.bk-transfer .source-list .content li.custom-item .content-text,
+.bk-transfer .target-list .content li.custom-item .content-text,
+.bk-transfer .source-list .content li .item-content .content-text,
+.bk-transfer .target-list .content li .item-content .content-text {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  flex: 1;
+}
+.bk-transfer .source-list .content li.custom-item .icon-wrapper,
+.bk-transfer .target-list .content li.custom-item .icon-wrapper,
+.bk-transfer .source-list .content li .item-content .icon-wrapper,
+.bk-transfer .target-list .content li .item-content .icon-wrapper {
+  display: none;
+  flex: 22px 0 0;
+}
+.bk-transfer .source-list .content li.custom-item .icon-wrapper.hover,
+.bk-transfer .target-list .content li.custom-item .icon-wrapper.hover,
+.bk-transfer .source-list .content li .item-content .icon-wrapper.hover,
+.bk-transfer .target-list .content li .item-content .icon-wrapper.hover {
+  display: inline-block;
+}
+.bk-transfer .source-list .content::-webkit-scrollbar,
+.bk-transfer .target-list .content::-webkit-scrollbar {
+  width: 4px;
+}
+.bk-transfer .source-list .content::-webkit-scrollbar-thumb,
+.bk-transfer .target-list .content::-webkit-scrollbar-thumb {
+  height: 5px;
+  background-color: #e6e9ea;
+  border-radius: 2px;
+}
+.bk-transfer .source-list .content .bk-icon,
+.bk-transfer .target-list .content .bk-icon {
+  font-size: 22px;
+}
+.bk-transfer .target-list {
+  margin-left: 33px;
+}
+.bk-transfer .transfer-search-input {
+  height: 36px;
+  line-height: 34px;
+  border: none;
+  border-bottom: 1px solid #f0f1f5;
+  outline: none;
+}
+.bk-transfer .transfer-search-input.is-focused {
+  border-color: #f0f1f5;
+  box-shadow: 0px 0px 3px 0px transparent;
+}

package/lib/transfer/transfer.d.ts

@@ -0,0 +1,185 @@
+/**
+ * Tencent is pleased to support the open source community by making
+ * 蓝鲸智云PaaS平台社区版 (BlueKing PaaS Community Edition) available.
+ *
+ * Copyright (C) 2021 THL A29 Limited, a Tencent company.  All rights reserved.
+ *
+ * 蓝鲸智云PaaS平台社区版 (BlueKing PaaS Community Edition) is licensed under the MIT License.
+ *
+ * License for 蓝鲸智云PaaS平台社区版 (BlueKing PaaS Community Edition):
+ *
+ * ---------------------------------------------------
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated
+ * documentation files (the "Software"), to deal in the Software without restriction, including without limitation
+ * the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and
+ * to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial portions of
+ * the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO
+ * THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF
+ * CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
+ * IN THE SOFTWARE.
+ */
+import { ExtractPropTypes, PropType } from 'vue';
+declare const transferProps: {
+    title: PropType<string[]>;
+    extCls: import("vue-types").VueTypeValidableDef<string> & {
+        default: string;
+    };
+    settingKey: import("vue-types").VueTypeValidableDef<string> & {
+        default: string;
+    };
+    displayKey: import("vue-types").VueTypeValidableDef<string> & {
+        default: string;
+    };
+    searchPlaceholder: import("vue-types").VueTypeValidableDef<string> & {
+        default: string;
+    };
+    showOverflowTips: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    };
+    searchable: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    };
+    sortKey: import("vue-types").VueTypeValidableDef<string> & {
+        default: string;
+    };
+    sortable: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    };
+    sourceList: ArrayConstructor;
+    targetList: ArrayConstructor;
+    emptyContent: PropType<string[]>;
+};
+export declare type TransferPropType = ExtractPropTypes<typeof transferProps>;
+declare const _default: import("vue").DefineComponent<{
+    title: {
+        type: PropType<string[]>;
+        default: () => any[];
+    };
+    extCls: {
+        type: StringConstructor;
+        default: string;
+    };
+    searchPlaceholder: {
+        type: StringConstructor;
+        default: string;
+    };
+    settingKey: {
+        type: StringConstructor;
+        default: string;
+    };
+    displayKey: {
+        type: StringConstructor;
+        default: string;
+    };
+    sortKey: {
+        type: StringConstructor;
+        default: string;
+    };
+    showOverflowTips: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    searchable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    sortable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    sourceList: {
+        type: ArrayConstructor;
+        default: () => any[];
+    };
+    targetList: {
+        type: ArrayConstructor;
+        default: () => any[];
+    };
+    emptyContent: {
+        type: PropType<string[]>;
+        default: () => any[];
+    };
+}, {
+    keyword: import("vue").Ref<string>;
+    transferRef: any;
+    dataList: import("vue").Ref<any[]>;
+    allToRight: () => void;
+    allToLeft: () => void;
+    displayDataList: import("vue").ComputedRef<any[]>;
+    displayCode: import("vue").ComputedRef<string>;
+    leftHoverIndex: import("vue").Ref<number>;
+    rightHoverIndex: import("vue").Ref<number>;
+    handleItemMouseEvent: (type: any, event: any, isLeft: any, index: any) => void;
+    handleItemClick: (event: any, index: any, isLeft: any) => void;
+    hasSelectedList: import("vue").Ref<any[]>;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "change"[], "change", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<ExtractPropTypes<{
+    title: {
+        type: PropType<string[]>;
+        default: () => any[];
+    };
+    extCls: {
+        type: StringConstructor;
+        default: string;
+    };
+    searchPlaceholder: {
+        type: StringConstructor;
+        default: string;
+    };
+    settingKey: {
+        type: StringConstructor;
+        default: string;
+    };
+    displayKey: {
+        type: StringConstructor;
+        default: string;
+    };
+    sortKey: {
+        type: StringConstructor;
+        default: string;
+    };
+    showOverflowTips: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    searchable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    sortable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    sourceList: {
+        type: ArrayConstructor;
+        default: () => any[];
+    };
+    targetList: {
+        type: ArrayConstructor;
+        default: () => any[];
+    };
+    emptyContent: {
+        type: PropType<string[]>;
+        default: () => any[];
+    };
+}>> & {
+    onChange?: (...args: any[]) => any;
+}, {
+    title: string[];
+    extCls: string;
+    displayKey: string;
+    sortable: boolean;
+    settingKey: string;
+    searchPlaceholder: string;
+    showOverflowTips: boolean;
+    searchable: boolean;
+    sortKey: string;
+    sourceList: unknown[];
+    targetList: unknown[];
+    emptyContent: string[];
+}>;
+export default _default;

package/lib/transfer/transfer.less

@@ -0,0 +1,171 @@
+@import '../styles/themes/themes.less';
+
+/* 边框色 */
+@borderInlineColor: #dde4eb;
+
+/* 按钮、表单边框颜色、禁用时文本颜色 */
+@newGreyColor: #c4c6cc;
+
+/* 表格头部背景色、禁用底色 */
+@newGreyColor2: #f0f1f5;
+
+/* 大面积背景色 */
+@newGreyColor3: #fafbfd;
+
+/* 重点表示、强调、链接以及带有明确指示性 */
+@newMainColor: #3a84ff;
+
+/* 正常尺寸图标 */
+@iconNormalSize: 22px;
+
+.@{bk-prefix}-transfer {
+  position: relative;
+  display: flex;
+  font-size: 14px;
+  flex-direction: row;
+  justify-content: center;
+
+  .transfer {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 30px;
+    height: 30px;
+    background: url('@bkui-vue/styles/images/transfer.png') no-repeat center center;
+    transform: translate(-50%, -50%);
+  }
+
+  .source-list,
+  .target-list {
+    height: 400px;
+    min-width: 200px;
+    overflow: hidden;
+    background-color: #fff;
+    border: 1px solid @borderInlineColor;
+    border-radius: 2px;
+    flex: 1;
+
+    .slot-header {
+      position: relative;
+      height: 43px;
+      padding: 0 20px;
+      line-height: 43px;
+      background-color: @newGreyColor3;
+      border-bottom: 1px solid @borderInlineColor;
+
+      .slot-content {
+        position: relative;
+      }
+    }
+
+    .header {
+      position: relative;
+      height: 43px;
+      padding: 0 20px;
+      line-height: 43px;
+      background-color: @newGreyColor3;
+      border-bottom: 1px solid @borderInlineColor;
+
+      span {
+        position: absolute;
+        right: 10px;
+        font-size: 12px;
+        color: @newMainColor;
+        cursor: pointer;
+
+        &.disabled {
+          color: @newGreyColor;
+          cursor: not-allowed;
+        }
+      }
+    }
+
+    .empty {
+      position: relative;
+      top: 40%;
+      width: 100%;
+      color: @newGreyColor;
+      text-align: center;
+      cursor: default;
+    }
+
+    .content {
+      position: relative;
+      max-height: calc(100% - 50px);
+      padding: 0;
+      margin: 6px 0;
+      overflow-y: auto;
+
+      &.is-search {
+        max-height: calc(100% - 86px);
+      }
+
+      li {
+        &.custom-item,
+        .item-content {
+          position: relative;
+          display: flex;
+          height: 40px;
+          padding: 0 20px;
+          line-height: 40px;
+          list-style: none;
+          cursor: pointer;
+          align-items: center;
+
+          &:hover {
+            color: @newMainColor;
+            background-color: #eef6fe;
+          }
+
+          .content-text {
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+            flex: 1;
+          }
+
+          .icon-wrapper {
+            display: none;
+            flex: 22px 0 0;
+
+            &.hover {
+              display: inline-block;
+            }
+          }
+        }
+      }
+
+      &::-webkit-scrollbar {
+        width: 4px;
+        // background-color: color(transparent lightness(80%));
+      }
+
+      &::-webkit-scrollbar-thumb {
+        height: 5px;
+        background-color: #e6e9ea;
+        border-radius: 2px;
+      }
+
+      .bk-icon {
+        font-size: @iconNormalSize;
+      }
+    }
+  }
+
+  .target-list {
+    margin-left: 33px;
+  }
+
+  .transfer-search-input {
+    height: 36px;
+    line-height: 34px;
+    border: none;
+    border-bottom: 1px solid @newGreyColor2;
+    outline: none;
+
+    &.is-focused {
+      border-color: @newGreyColor2;
+      box-shadow: 0px 0px 3px 0px transparent;
+    }
+  }
+}