diff --git a/packages/dooringx-example/src/global.less b/packages/dooringx-example/src/global.less
index aea3d11..e69de29 100644
--- a/packages/dooringx-example/src/global.less
+++ b/packages/dooringx-example/src/global.less
@@ -1,3 +0,0 @@
-.ant-menu-title-content {
-	margin: 0 !important;
-}
diff --git a/packages/dooringx-example/src/layouts/index.tsx b/packages/dooringx-example/src/layouts/index.tsx
index f8d0dba..66232a8 100644
--- a/packages/dooringx-example/src/layouts/index.tsx
+++ b/packages/dooringx-example/src/layouts/index.tsx
@@ -2,7 +2,7 @@
  * @Author: yehuozhili
  * @Date: 2021-07-07 14:51:17
  * @LastEditors: yehuozhili
- * @LastEditTime: 2021-07-27 16:24:29
+ * @LastEditTime: 2021-08-12 14:37:38
  * @FilePath: \dooringx\packages\dooringx-example\src\layouts\index.tsx
  */
 import { Button } from 'antd';
diff --git a/packages/dooringx-example/src/pages/index.tsx b/packages/dooringx-example/src/pages/index.tsx
index 085d1fc..2602601 100644
--- a/packages/dooringx-example/src/pages/index.tsx
+++ b/packages/dooringx-example/src/pages/index.tsx
@@ -2,7 +2,7 @@
  * @Author: yehuozhili
  * @Date: 2021-05-15 12:49:28
  * @LastEditors: yehuozhili
- * @LastEditTime: 2021-08-11 16:26:46
+ * @LastEditTime: 2021-08-12 15:57:35
  * @FilePath: \dooringx\packages\dooringx-example\src\pages\index.tsx
  */
 import {
@@ -14,12 +14,22 @@ import {
 	ContainerWrapper,
 	Control,
 } from 'dooringx-lib';
+import { InsertRowBelowOutlined } from '@ant-design/icons';
 import { useContext } from 'react';
 import { configContext } from '@/layouts';
 import { useCallback } from 'react';
 import { PREVIEWSTATE } from '@/constant';
-
+import { Button, Popover } from 'antd';
 export const HeaderHeight = '40px';
+const footerConfig = function () {
+	return (
+		<>
+			<Popover content={'快捷键'} title={null} trigger="hover">
+				<Button type="text" icon={<InsertRowBelowOutlined />}></Button>
+			</Popover>
+		</>
+	);
+};
 
 export default function IndexPage() {
 	const config = useContext(configContext);
@@ -34,21 +44,20 @@ export default function IndexPage() {
 	return (
 		<div {...innerContainerDragUp(config)}>
 			<div style={{ height: HeaderHeight }}>
-				head
-				<button
+				<Button
 					onClick={() => {
 						window.open('/iframe');
 					}}
 				>
-					go preview
-				</button>
-				<button
+					iframe 预览
+				</Button>
+				<Button
 					onClick={() => {
 						window.open('/preview');
 					}}
 				>
-					go preview
-				</button>
+					普通预览
+				</Button>
 			</div>
 			<div
 				style={{
@@ -60,7 +69,7 @@ export default function IndexPage() {
 				}}
 			>
 				<div style={{ height: '100%' }}>
-					<LeftConfig config={config}></LeftConfig>
+					<LeftConfig 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 0a7ea24..64458b0 100644
--- a/packages/dooringx-example/src/plugin/index.tsx
+++ b/packages/dooringx-example/src/plugin/index.tsx
@@ -2,13 +2,13 @@
  * @Author: yehuozhili
  * @Date: 2021-02-27 21:33:36
  * @LastEditors: yehuozhili
- * @LastEditTime: 2021-08-05 10:54:22
+ * @LastEditTime: 2021-08-12 14:43:05
  * @FilePath: \dooringx\packages\dooringx-example\src\plugin\index.tsx
  */
 
 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';
@@ -36,12 +36,18 @@ export const defaultConfig: Partial<InitConfig> = {
 		{
 			type: 'basic',
 			icon: <HighlightOutlined />,
-			displayName: '基础组件',
+			displayName: '基础',
+		},
+		{
+			type: 'media',
+			icon: <PlayCircleOutlined />,
+			displayName: '媒体组件',
 		},
 		{
 			type: 'xxc',
 			icon: <ContainerOutlined />,
 			custom: true,
+			displayName: '自定义',
 			customRender: <div>我是自定义渲染</div>,
 		},
 	],
diff --git a/packages/dooringx-lib/src/components/leftConfig.tsx b/packages/dooringx-lib/src/components/leftConfig.tsx
index db3b7c6..66d877a 100644
--- a/packages/dooringx-lib/src/components/leftConfig.tsx
+++ b/packages/dooringx-lib/src/components/leftConfig.tsx
@@ -2,7 +2,7 @@
  * @Author: yehuozhili
  * @Date: 2021-02-04 10:32:45
  * @LastEditors: yehuozhili
- * @LastEditTime: 2021-07-12 17:12:35
+ * @LastEditTime: 2021-08-12 15:50:48
  * @FilePath: \dooringx\packages\dooringx-lib\src\components\leftConfig.tsx
  */
 import React, { ReactNode, useEffect, useMemo, useState } from 'react';
@@ -13,15 +13,19 @@ import { DoubleLeftOutlined, DoubleRightOutlined, SearchOutlined } from '@ant-de
 
 import styles from '../index.less';
 
+declare type modeType = 'horizontal' | 'vertical';
 interface LeftConfigProps {
 	config: UserConfig;
+	showName?: Boolean;
+	footerConfig?: ReactNode;
+	mode?: modeType;
 }
 
 /**
  *
  * 注册加载左侧组件方法，由于异步拉取，所以要异步加载
  * 不同tab页可以使用不同type区分
- * @param {*} props
+ * @param {*} props -LeftConfigProps options可选项：showName:是否显示displayName; mode:'horizontal' | 'vertical' icon与文案展示方向 ;footerConfig:底部功能配置ReactNode类型；
  * @returns
  */
 function LeftConfig(props: LeftConfigProps) {
@@ -150,13 +154,27 @@ function LeftConfig(props: LeftConfigProps) {
 	return (
 		<div style={{ display: 'flex', height: '100%' }}>
 			<div style={{ display: 'flex', flexDirection: 'column' }}>
-				<Menu style={{ flex: 1 }} defaultSelectedKeys={[menuSelect]} mode="vertical">
+				<Menu
+					style={{ flex: 1 }}
+					defaultSelectedKeys={[menuSelect]}
+					mode="vertical"
+					inlineCollapsed={props.showName ? false : true}
+					className={`${styles.menuWidth} ${styles.menus}`}
+				>
 					{leftMapRenderListCategory.map((v, i) => {
 						return (
-							<Menu.Item key={i} onClick={() => setMenuSelect(i + '')} icon={v.icon}></Menu.Item>
+							<Menu.Item
+								key={i}
+								onClick={() => setMenuSelect(i + '')}
+								icon={v.icon}
+								className={props.mode === 'vertical' ? `${styles.menuStyle} ${styles.menus}` : ''}
+							>
+								{props.showName && v.displayName}
+							</Menu.Item>
 						);
 					})}
 				</Menu>
+				<div className={`${styles.menu_footer}`}>{props.footerConfig}</div>
 				<Menu selectedKeys={[]}>
 					<Menu.Item
 						key="1"
diff --git a/packages/dooringx-lib/src/index.less b/packages/dooringx-lib/src/index.less
index 6982f62..a5ba2b1 100644
--- a/packages/dooringx-lib/src/index.less
+++ b/packages/dooringx-lib/src/index.less
@@ -162,7 +162,23 @@
 		}
 	}
 }
+.menuWidth.menus {
+	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;
+	}
+}
 .menu_footer {
 	display: flex;
 	flex-direction: column;