diff --git a/packages/dooringx-example/src/pages/index.tsx b/packages/dooringx-example/src/pages/index.tsx
index b0c2b8f..39bc6ae 100644
--- a/packages/dooringx-example/src/pages/index.tsx
+++ b/packages/dooringx-example/src/pages/index.tsx
@@ -14,12 +14,26 @@ import {
 	ContainerWrapper,
 	Control,
 } from 'dooringx-lib';
+import { FormattedMessage } from 'react-intl';
+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>
+			<Popover content={'快捷键'} title={null} trigger="hover">
+				<Button type="text" icon={<InsertRowBelowOutlined />}></Button>
+			</Popover>
+		</>
+	);
+};
 
 export default function IndexPage() {
 	const config = useContext(configContext);
@@ -35,21 +49,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={{
@@ -61,7 +74,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..4b963da 100644
--- a/packages/dooringx-example/src/plugin/index.tsx
+++ b/packages/dooringx-example/src/plugin/index.tsx
@@ -36,7 +36,7 @@ export const defaultConfig: Partial<InitConfig> = {
 		{
 			type: 'basic',
 			icon: <HighlightOutlined />,
-			displayName: '基础组件',
+			displayName: '基础',
 		},
 		{
 			type: 'xxc',
diff --git a/packages/dooringx-lib/src/components/leftConfig.tsx b/packages/dooringx-lib/src/components/leftConfig.tsx
index db3b7c6..9ec4bee 100644
--- a/packages/dooringx-lib/src/components/leftConfig.tsx
+++ b/packages/dooringx-lib/src/components/leftConfig.tsx
@@ -15,6 +15,7 @@ import styles from '../index.less';
 
 interface LeftConfigProps {
 	config: UserConfig;
+	footerConfig?: ReactNode;
 }
 
 /**
@@ -153,10 +154,18 @@ function LeftConfig(props: LeftConfigProps) {
 				<Menu style={{ flex: 1 }} defaultSelectedKeys={[menuSelect]} mode="vertical">
 					{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={`${styles.menuStyle}`}
+							>
+								{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..e47cdc6 100644
--- a/packages/dooringx-lib/src/index.less
+++ b/packages/dooringx-lib/src/index.less
@@ -163,6 +163,12 @@
 	}
 }
 
+.menuStyle {
+	display: flex !important;
+	flex-direction: column !important;
+	justify-content: center !important;
+	height: auto !important;
+}
 .menu_footer {
 	display: flex;
 	flex-direction: column;