style(docs): transfer demo border style (#78)

content/input/transfer/index-en-US.md

@@ -397,7 +397,7 @@ class CustomRenderDemo extends React.Component {
         super(props);
         this.state = {
             dataSource: Array.from({ length: 100 }, (v, i) => ({
-                label: `Haidilao Store ${i}`,
+                label: `Hdl Store ${i}`,
                 value: i,
                 disabled: false,
                 key: i,
@@ -491,7 +491,7 @@ class CustomRenderDemo extends React.Component {
         return (
             <section className="selected-panel">
                 <div className="panel-header sp-font">
-                    <div>Selected sync store: {selectedData.length}</div>
+                    <div>Selected: {selectedData.length}</div>
                     <Button theme="borderless" type="primary" onClick={onClear} size="small">
                         {clearText || 'Clear '}
                     </Button>
@@ -518,12 +518,14 @@ class CustomRenderDemo extends React.Component {
 
 ```scss
 .component-transfer-demo-custom-panel {
+
     .sp-font {
         color: rgba(var(--semi-grey-9), 1);
         font-size: 12px;
         font-weight: 500;
         line-height: 20px;
     }
+
     .empty {
         width: 100%;
         height: 100%;
@@ -531,78 +533,102 @@ class CustomRenderDemo extends React.Component {
         align-items: center;
         justify-content: center;
     }
+
     .panel-item {
-        width: 176px;
+        flex-shrink: 0;
         height: 56px;
         border-radius: 4px;
-        margin-bottom: 8px;
         padding: 8px 12px;
         flex-wrap: wrap;
-        background-color: rgba(22, 24, 35, 0.03);
+        background-color: rgba(22, 24, 35, .03);
+
         &-main {
             flex-grow: 1;
         }
+
         p {
             margin: 0 12px;
             flex-basis: 100%;
         }
+
         .panel-item-remove {
             cursor: pointer;
             color: var(--semi-color-primary);
         }
     }
+
+    .panel-header {
+        padding: 10px 12px;
+        border: 1px solid rgba(22, 24, 35, .16);
+        border-radius: 4px 4px 0 0;
+        height: 38px;
+        box-sizing: border-box;
+        background-color: var(--semi-color-tertiary-light-default);
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+
+        .clear {
+            cursor: pointer;
+            color: var(--semi-color-primary);
+        }
+    }
+
     .source-panel {
+        display: flex;
+        flex-direction: column;
         width: 482px;
         height: 353px;
-        border: 1px solid var(--semi-color-border);
-        border-top: none;
-        .panel-list {
-            overflow-y: auto;
-            height: 202px;
-            display: flex;
-            margin-left: 12px;
-            margin-right: 12px;
-            flex-wrap: wrap;
+
+        .panel-main {
+            border: 1px solid var(--semi-color-border);
+            border-top: none;
+
+            .panel-list {
+                display: flex;
+                flex-wrap: wrap;
+                row-gap: 8px;
+                column-gap: 8px;
+                overflow-y: auto;
+                height: 214px;
+                margin-left: 12px;
+                margin-right: 12px;
+                padding-bottom: 8px;
+            }
         }
+
         .panel-controls {
             margin: 10px 12px;
             font-size: 12px;
             line-height: 20px;
+
             .semi-button {
                 margin-left: 8px;
                 font-size: 12px;
             }
         }
+
         .panel-item {
-            margin-right: 8px;
+            width: 176px;
         }
+
         margin-right: 16px;
     }
+
     .selected-panel {
         width: 200px;
         height: 353px;
+
         .panel-main {
+            display: flex;
+            flex-direction: column;
             overflow-y: auto;
             padding: 12px;
             border: 1px solid var(--semi-color-border);
             border-top: none;
-            height: 315px;
+            height: 323px;
             box-sizing: border-box;
-        }
-    }
-    .panel-header {
-        padding: 10px 12px;
-        border: 1px solid rgba(22, 24, 35, 0.16);
-        border-radius: 4px 4px 0 0;
-        height: 38px;
-        box-sizing: border-box;
-        background-color: var(--semi-color-tertiary-light-default);
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        .clear {
-            cursor: pointer;
-            color: var(--semi-color-primary);
+            row-gap: 8px;
         }
     }
 }
@@ -625,7 +651,7 @@ class CustomRenderDragDemo extends React.Component {
         super(props);
         this.state = {
             dataSource: Array.from({ length: 100 }, (v, i) => ({
-                label: `Haidilao Store ${i}`,
+                label: `Hdl Store ${i}`,
                 value: i,
                 disabled: false,
                 key: i,
@@ -749,7 +775,7 @@ class CustomRenderDragDemo extends React.Component {
         return (
             <section className="selected-panel">
                 <div className="panel-header sp-font">
-                    <div>Selected sync store: {selectedData.length}</div>
+                    <div>Selected: {selectedData.length}</div>
                     <Button theme="borderless" type="primary" onClick={onClear} size="small">
                         {clearText || 'Clear '}
                     </Button>

content/input/transfer/index.md

@@ -520,12 +520,14 @@ class CustomRenderDemo extends React.Component {
 
 ```scss
 .component-transfer-demo-custom-panel {
+
     .sp-font {
         color: rgba(var(--semi-grey-9), 1);
         font-size: 12px;
         font-weight: 500;
         line-height: 20px;
     }
+
     .empty {
         width: 100%;
         height: 100%;
@@ -533,78 +535,102 @@ class CustomRenderDemo extends React.Component {
         align-items: center;
         justify-content: center;
     }
+
     .panel-item {
-        width: 176px;
+        flex-shrink: 0;
         height: 56px;
         border-radius: 4px;
-        margin-bottom: 8px;
         padding: 8px 12px;
         flex-wrap: wrap;
-        background-color: rgba(22, 24, 35, 0.03);
+        background-color: rgba(22, 24, 35, .03);
+
         &-main {
             flex-grow: 1;
         }
+
         p {
             margin: 0 12px;
             flex-basis: 100%;
         }
+
         .panel-item-remove {
             cursor: pointer;
             color: var(--semi-color-primary);
         }
     }
+
+    .panel-header {
+        padding: 10px 12px;
+        border: 1px solid rgba(22, 24, 35, .16);
+        border-radius: 4px 4px 0 0;
+        height: 38px;
+        box-sizing: border-box;
+        background-color: var(--semi-color-tertiary-light-default);
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+
+        .clear {
+            cursor: pointer;
+            color: var(--semi-color-primary);
+        }
+    }
+
     .source-panel {
+        display: flex;
+        flex-direction: column;
         width: 482px;
         height: 353px;
-        border: 1px solid var(--semi-color-border);
-        border-top: none;
-        .panel-list {
-            overflow-y: auto;
-            height: 202px;
-            display: flex;
-            margin-left: 12px;
-            margin-right: 12px;
-            flex-wrap: wrap;
+
+        .panel-main {
+            border: 1px solid var(--semi-color-border);
+            border-top: none;
+
+            .panel-list {
+                display: flex;
+                flex-wrap: wrap;
+                row-gap: 8px;
+                column-gap: 8px;
+                overflow-y: auto;
+                height: 214px;
+                margin-left: 12px;
+                margin-right: 12px;
+                padding-bottom: 8px;
+            }
         }
+
         .panel-controls {
             margin: 10px 12px;
             font-size: 12px;
             line-height: 20px;
+
             .semi-button {
                 margin-left: 8px;
                 font-size: 12px;
             }
         }
+
         .panel-item {
-            margin-right: 8px;
+            width: 176px;
         }
+
         margin-right: 16px;
     }
+
     .selected-panel {
         width: 200px;
         height: 353px;
+
         .panel-main {
+            display: flex;
+            flex-direction: column;
             overflow-y: auto;
             padding: 12px;
             border: 1px solid var(--semi-color-border);
             border-top: none;
-            height: 315px;
+            height: 323px;
             box-sizing: border-box;
-        }
-    }
-    .panel-header {
-        padding: 10px 12px;
-        border: 1px solid rgba(22, 24, 35, 0.16);
-        border-radius: 4px 4px 0 0;
-        height: 38px;
-        box-sizing: border-box;
-        background-color: var(--semi-color-tertiary-light-default);
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        .clear {
-            cursor: pointer;
-            color: var(--semi-color-primary);
+            row-gap: 8px;
         }
     }
 }

src/styles/docDemo.scss

@@ -13,6 +13,7 @@
             background: var(--semi-color-primary-light-default);
             outline: 1px solid var(--semi-color-primary-light-active);
         }
+
         // .semi-col:nth-child(2n) {
         //     height: 30px;
         //     line-height: 30px;
@@ -60,6 +61,11 @@
     border-top: 2px dashed #1890ff;
 }
 
+.semi-right-item-drag-handler {
+    margin-right: 8px;
+    cursor: pointer;
+}
+
 .components-transfer-demo-selected-item {
 
     .semi-icon-close {
@@ -94,10 +100,9 @@
     }
 
     .panel-item {
-        width: 176px;
+        flex-shrink: 0;
         height: 56px;
         border-radius: 4px;
-        margin-bottom: 8px;
         padding: 8px 12px;
         flex-wrap: wrap;
         background-color: rgba(22, 24, 35, .03);
@@ -117,19 +122,44 @@
         }
     }
 
+    .panel-header {
+        padding: 10px 12px;
+        border: 1px solid rgba(22, 24, 35, .16);
+        border-radius: 4px 4px 0 0;
+        height: 38px;
+        box-sizing: border-box;
+        background-color: var(--semi-color-tertiary-light-default);
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+
+        .clear {
+            cursor: pointer;
+            color: var(--semi-color-primary);
+        }
+    }
+
     .source-panel {
+        display: flex;
+        flex-direction: column;
         width: 482px;
         height: 353px;
-        border: 1px solid var(--semi-color-border);
-        border-top: none;
 
-        .panel-list {
-            overflow-y: auto;
-            height: 202px;
-            display: flex;
-            margin-left: 12px;
-            margin-right: 12px;
-            flex-wrap: wrap;
+        .panel-main {
+            border: 1px solid var(--semi-color-border);
+            border-top: none;
+
+            .panel-list {
+                display: flex;
+                flex-wrap: wrap;
+                row-gap: 8px;
+                column-gap: 8px;
+                overflow-y: auto;
+                height: 214px;
+                margin-left: 12px;
+                margin-right: 12px;
+                padding-bottom: 8px;
+            }
         }
 
         .panel-controls {
@@ -144,8 +174,9 @@
         }
 
         .panel-item {
-            margin-right: 8px;
+            width: 176px;
         }
+
         margin-right: 16px;
     }
 
@@ -154,29 +185,15 @@
         height: 353px;
 
         .panel-main {
+            display: flex;
+            flex-direction: column;
             overflow-y: auto;
             padding: 12px;
             border: 1px solid var(--semi-color-border);
             border-top: none;
-            height: 315px;
+            height: 323px;
             box-sizing: border-box;
-        }
-    }
-
-    .panel-header {
-        padding: 10px 12px;
-        border: 1px solid rgba(22, 24, 35, .16);
-        border-radius: 4px 4px 0 0;
-        height: 38px;
-        box-sizing: border-box;
-        background-color: var(--semi-color-tertiary-light-default);
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-
-        .clear {
-            cursor: pointer;
-            color: var(--semi-color-primary);
+            row-gap: 8px;
         }
     }
 }
@@ -286,11 +303,11 @@
 }
 
 .components-datepicker-demo-slot {
-    
+
     .semi-tabs-content {
         padding: 0;
     }
-    
+
     .semi-tabs-bar-line.semi-tabs-bar-top {
         border-bottom: none;
     }