diff --git a/packages/dooringx-example/src/plugin/index.tsx b/packages/dooringx-example/src/plugin/index.tsx
index 64458b0..4ffc99a 100644
--- a/packages/dooringx-example/src/plugin/index.tsx
+++ b/packages/dooringx-example/src/plugin/index.tsx
@@ -1,8 +1,8 @@
 /*
  * @Author: yehuozhili
  * @Date: 2021-02-27 21:33:36
- * @LastEditors: yehuozhili
- * @LastEditTime: 2021-08-12 14:43:05
+ * @LastEditors: Please set LastEditors
+ * @LastEditTime: 2021-08-18 19:54:56
  * @FilePath: \dooringx\packages\dooringx-example\src\plugin\index.tsx
  */
 
@@ -19,6 +19,7 @@ const LeftRegistMap: LeftRegistComponentMapItem[] = [
 		type: 'basic',
 		component: 'button',
 		img: 'icon-anniu',
+		imgCustom: <PlayCircleOutlined />,
 		displayName: '按钮',
 		urlFn: () => import('./registComponents/button'),
 	},
@@ -58,7 +59,7 @@ export const defaultConfig: Partial<InitConfig> = {
 		{
 			type: 'style',
 			icon: (
-				<div className="right-tab-item" style={{ width: 50, textAlign: 'center' }}>
+				<div className='right-tab-item' style={{ width: 50, textAlign: 'center' }}>
 					外观
 				</div>
 			),
@@ -66,7 +67,7 @@ export const defaultConfig: Partial<InitConfig> = {
 		{
 			type: 'animate',
 			icon: (
-				<div className="right-tab-item" style={{ width: 50, textAlign: 'center' }}>
+				<div className='right-tab-item' style={{ width: 50, textAlign: 'center' }}>
 					动画
 				</div>
 			),
@@ -74,7 +75,7 @@ export const defaultConfig: Partial<InitConfig> = {
 		{
 			type: 'fn',
 			icon: (
-				<div className="right-tab-item" style={{ width: 50, textAlign: 'center' }}>
+				<div className='right-tab-item' style={{ width: 50, textAlign: 'center' }}>
 					函数
 				</div>
 			),
@@ -82,7 +83,7 @@ export const defaultConfig: Partial<InitConfig> = {
 		{
 			type: 'actions',
 			icon: (
-				<div className="right-tab-item" style={{ width: 50, textAlign: 'center' }}>
+				<div className='right-tab-item' style={{ width: 50, textAlign: 'center' }}>
 					事件
 				</div>
 			),
diff --git a/packages/dooringx-lib/src/index.less b/packages/dooringx-lib/src/index.less
index a5ba2b1..84baff2 100644
--- a/packages/dooringx-lib/src/index.less
+++ b/packages/dooringx-lib/src/index.less
@@ -1,197 +1,208 @@
 .yhLeftrender {
-	overflow: auto;
+  overflow: auto;
 
-	.leftco {
-		padding: 10px;
-		display: flex;
-		justify-content: flex-start;
-		flex-wrap: wrap;
+  .leftco {
+    padding: 10px;
+    display: flex;
+    justify-content: flex-start;
+    flex-wrap: wrap;
 
-		.coitem {
-			margin: 5px;
+    .coitem {
+      margin: 5px;
 
-			.redbox {
-				height: 68px;
-				width: 68px;
-				background: var(--redbox-color);
-				// line-height: 20px;
-				display: flex;
-				align-items: center;
-				justify-content: center;
 
-				#icon-checkbox,
-				#icon-tabs,
-				#icon-jiantou path {
-					fill: currentColor;
-				}
-			}
-		}
-	}
+      .redbox {
+        height: 68px;
+        width: 68px;
+        // background: var(--redbox-color);
+        background-color: #F7F8FA;
+        // line-height: 20px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
+        #icon-checkbox,
+        #icon-tabs,
+        #icon-jiantou path {
+          fill: currentColor;
+        }
+
+        &:hover {
+          cursor: pointer;
+        }
+      }
+
+    }
+  }
 }
 
 .yh_container {
-	// ::selection {
-	//     color: inherit;
-	//     background-color: inherit;
-	// }
-	user-select: none;
-	-webkit-user-select: none;
-	-moz-user-select: none;
-	-ms-user-select: none;
+  // ::selection {
+  //     color: inherit;
+  //     background-color: inherit;
+  // }
+  user-select: none;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
 
-	:global(.am-list-item) {
-		background-color: rgba(255, 255, 255, 0);
-	}
+  :global(.am-list-item) {
+    background-color: rgba(255, 255, 255, 0);
+  }
 
-	:global(.am-list-body) {
-		background-color: rgba(255, 255, 255, 0);
-	}
+  :global(.am-list-body) {
+    background-color: rgba(255, 255, 255, 0);
+  }
 
-	:global(.ant-input) {
-		background-color: rgba(255, 255, 255, 0);
-	}
+  :global(.ant-input) {
+    background-color: rgba(255, 255, 255, 0);
+  }
 }
 
 .yh_container_preview {
-	:global(.am-list-item) {
-		background-color: rgba(255, 255, 255, 0);
-	}
+  :global(.am-list-item) {
+    background-color: rgba(255, 255, 255, 0);
+  }
 
-	:global(.am-list-body) {
-		background-color: rgba(255, 255, 255, 0);
-	}
+  :global(.am-list-body) {
+    background-color: rgba(255, 255, 255, 0);
+  }
 
-	:global(.ant-input) {
-		background-color: rgba(255, 255, 255, 0);
-	}
+  :global(.ant-input) {
+    background-color: rgba(255, 255, 255, 0);
+  }
 }
 
 .yh_block_focus {
-	&::before {
-		position: absolute;
-		top: -3px;
-		left: -3px;
-		right: -3px;
-		bottom: -3px;
-		content: '';
-		border: 2px dashed #2196f3;
-	}
+  &::before {
+    position: absolute;
+    top: -3px;
+    left: -3px;
+    right: -3px;
+    bottom: -3px;
+    content: '';
+    border: 2px dashed #2196f3;
+  }
 }
 
 .yhTempDiv {
-	background-color: #7165fa2b;
+  background-color: #7165fa2b;
 }
 
 .resizepoint {
-	position: absolute;
-	height: 6px;
-	width: 6px;
-	background-color: #2196f3;
-	cursor: pointer;
-	border-radius: 50%;
+  position: absolute;
+  height: 6px;
+  width: 6px;
+  background-color: #2196f3;
+  cursor: pointer;
+  border-radius: 50%;
 
-	&.l {
-		left: -6px;
-		top: calc(50% - 3px);
+  &.l {
+    left: -6px;
+    top: calc(50% - 3px);
 
-		&:hover {
-			cursor: e-resize;
-		}
-	}
+    &:hover {
+      cursor: e-resize;
+    }
+  }
 
-	&.r {
-		right: -6px;
-		top: calc(50% - 3px);
+  &.r {
+    right: -6px;
+    top: calc(50% - 3px);
 
-		&:hover {
-			cursor: e-resize;
-		}
-	}
+    &:hover {
+      cursor: e-resize;
+    }
+  }
 
-	&.t {
-		top: -6px;
-		left: calc(50% - 3px);
+  &.t {
+    top: -6px;
+    left: calc(50% - 3px);
 
-		&:hover {
-			cursor: s-resize;
-		}
-	}
+    &:hover {
+      cursor: s-resize;
+    }
+  }
 
-	&.b {
-		bottom: -6px;
-		left: calc(50% - 3px);
+  &.b {
+    bottom: -6px;
+    left: calc(50% - 3px);
 
-		&:hover {
-			cursor: s-resize;
-		}
-	}
+    &:hover {
+      cursor: s-resize;
+    }
+  }
 
-	&.lt {
-		top: -6px;
-		left: -6px;
+  &.lt {
+    top: -6px;
+    left: -6px;
 
-		&:hover {
-			cursor: nw-resize;
-		}
-	}
+    &:hover {
+      cursor: nw-resize;
+    }
+  }
 
-	&.lb {
-		bottom: -6px;
-		left: -6px;
+  &.lb {
+    bottom: -6px;
+    left: -6px;
 
-		&:hover {
-			cursor: ne-resize;
-		}
-	}
+    &:hover {
+      cursor: ne-resize;
+    }
+  }
 
-	&.rb {
-		bottom: -6px;
-		right: -6px;
+  &.rb {
+    bottom: -6px;
+    right: -6px;
 
-		&:hover {
-			cursor: nw-resize;
-		}
-	}
+    &:hover {
+      cursor: nw-resize;
+    }
+  }
 
-	&.rt {
-		top: -6px;
-		right: -6px;
+  &.rt {
+    top: -6px;
+    right: -6px;
 
-		&:hover {
-			cursor: ne-resize;
-		}
-	}
+    &:hover {
+      cursor: ne-resize;
+    }
+  }
 }
+
 .menuWidth.menus {
-	width: initial;
+  width: initial;
 }
 
 .menuStyle.menus {
-	display: flex;
-	flex-direction: column;
-	justify-content: center;
-	text-align: center;
-	height: auto;
-	span:nth-child(1) {
-		margin-top: 10px;
-	}
-	span:nth-child(2) {
-		margin-left: 0;
-	}
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  text-align: center;
+  height: auto;
+
+  span:nth-child(1) {
+    margin-top: 10px;
+  }
+
+  span:nth-child(2) {
+    margin-left: 0;
+  }
 }
+
 .menu_footer {
-	display: flex;
-	flex-direction: column;
-	justify-content: center;
-	align-items: center;
-	position: relative;
-	bottom: 0;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  position: relative;
+  bottom: 0;
 }
 
 .rotate {
-	position: absolute;
-	top: -35px;
-	left: calc(50% - 10px);
-	cursor: grab;
-	font-size: 20px;
-}
+  position: absolute;
+  top: -35px;
+  left: calc(50% - 10px);
+  cursor: grab;
+  font-size: 20px;
+}
\ No newline at end of file