chore(react): improve drag source styles

Author: janryWang

packages/react/src/widgets/DragSourceWidget/index.tsx

@@ -46,7 +46,8 @@ export const DragSourceWidget: React.FC<IDragSourceWidgetProps> = observer(
 
     const source =
       workspace?.source?.size > 0 ? workspace.source : designer.source
-
+    const sources = source.getSourcesByGroup(props.name)
+    const remainItems = sources.length % 3
     return (
       <div
         className={cls(prefix, props.className, {
@@ -70,10 +71,8 @@ export const DragSourceWidget: React.FC<IDragSourceWidgetProps> = observer(
         </div>
         <div className={prefix + '-content-wrapper'}>
           <div className={prefix + '-content'}>
-            {source.mapSourcesByGroup(
-              props.name,
-              isFn(props.children) ? props.children : renderNode
-            )}
+            {sources.map(isFn(props.children) ? props.children : renderNode)}
+            {remainItems && <div className={prefix + '-item-remain'}></div>}
           </div>
         </div>
       </div>

packages/react/src/widgets/DragSourceWidget/styles.less

@@ -61,7 +61,7 @@
     position: relative;
     user-select: none;
     padding: 8px 10px;
-    background: #fff;
+    background: var(--dn-drag-source-content-bg-color);
     min-height: 40px;
     color: var(--dn-drag-source-item-color);
     display: flex;
@@ -76,9 +76,13 @@
       box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
       z-index: 1;
     }
+
     &-text {
       text-align: center;
       font-size: 12px;
     }
+    &-remain {
+      background: var(--dn-drag-source-content-bg-color);
+    }
   }
 }