diff --git a/packages/dooringx-example/src/pages/index.tsx b/packages/dooringx-example/src/pages/index.tsx
index 933288b..2d414a9 100644
--- a/packages/dooringx-example/src/pages/index.tsx
+++ b/packages/dooringx-example/src/pages/index.tsx
@@ -72,7 +72,12 @@ export default function IndexPage() {
 				}}
 			>
 				<div style={{ height: '100%' }}>
-					<LeftConfig mode="vertical" footerConfig={footerConfig()} config={config}></LeftConfig>
+					<LeftConfig
+						mode="vertical"
+						showName={true}
+						footerConfig={footerConfig()}
+						config={config}
+					></LeftConfig>
 				</div>
 
 				<ContainerWrapper config={config}>
diff --git a/packages/dooringx-example/src/plugin/index.tsx b/packages/dooringx-example/src/plugin/index.tsx
index 4b963da..e078ebf 100644
--- a/packages/dooringx-example/src/plugin/index.tsx
+++ b/packages/dooringx-example/src/plugin/index.tsx
@@ -8,7 +8,7 @@
 
 import { InitConfig } from 'dooringx-lib';
 import { LeftRegistComponentMapItem } from 'dooringx-lib/dist/core/crossDrag';
-import { ContainerOutlined, HighlightOutlined } from '@ant-design/icons';
+import { ContainerOutlined, PlayCircleOutlined, HighlightOutlined } from '@ant-design/icons';
 import commandModules from './commanderModules';
 import { functionMap } from './functionMap';
 import { Formmodules } from './formComponentModules';
@@ -38,6 +38,11 @@ export const defaultConfig: Partial<InitConfig> = {
 			icon: <HighlightOutlined />,
 			displayName: '基础',
 		},
+		{
+			type: 'media',
+			icon: <PlayCircleOutlined />,
+			displayName: '媒体组件',
+		},
 		{
 			type: 'xxc',
 			icon: <ContainerOutlined />,
diff --git a/packages/dooringx-lib/src/components/leftConfig.tsx b/packages/dooringx-lib/src/components/leftConfig.tsx
index e0ed381..2623ad3 100644
--- a/packages/dooringx-lib/src/components/leftConfig.tsx
+++ b/packages/dooringx-lib/src/components/leftConfig.tsx
@@ -16,6 +16,7 @@ import styles from '../index.less';
 declare type modeType = 'horizontal' | 'vertical';
 interface LeftConfigProps {
 	config: UserConfig;
+	showName?: Boolean;
 	footerConfig?: ReactNode;
 	mode?: modeType | undefined;
 }
@@ -24,7 +25,7 @@ interface LeftConfigProps {
  *
  * 注册加载左侧组件方法，由于异步拉取，所以要异步加载
  * 不同tab页可以使用不同type区分
- * @param {*} props -LeftConfigProps options可选项： mode:'horizontal' | 'vertical' icon与文案展示方向 ;footerConfig:底部功能配置ReactNode类型；
+ * @param {*} props -LeftConfigProps options可选项：showName:是否显示displayName; mode:'horizontal' | 'vertical' icon与文案展示方向 ;footerConfig:底部功能配置ReactNode类型；
  * @returns
  */
 function LeftConfig(props: LeftConfigProps) {
@@ -162,7 +163,7 @@ function LeftConfig(props: LeftConfigProps) {
 								icon={v.icon}
 								className={props.mode === 'vertical' ? `${styles.menuStyle}` : ''}
 							>
-								{v.displayName}
+								{props.showName && v.displayName}
 							</Menu.Item>
 						);
 					})}
diff --git a/packages/dooringx-lib/src/index.less b/packages/dooringx-lib/src/index.less
index 1d8ca42..08f972f 100644
--- a/packages/dooringx-lib/src/index.less
+++ b/packages/dooringx-lib/src/index.less
@@ -167,8 +167,9 @@
 	display: flex;
 	flex-direction: column;
 	justify-content: center;
+	text-align: center;
 	height: auto !important ;
-	padding-top: 8px !important ;
+	padding: 8px 16px !important ;
 }
 .menu_footer {
 	display: flex;