diff --git a/packages/dooringx-example/src/pages/index.tsx b/packages/dooringx-example/src/pages/index.tsx
index 39bc6ae..3643112 100644
--- a/packages/dooringx-example/src/pages/index.tsx
+++ b/packages/dooringx-example/src/pages/index.tsx
@@ -15,7 +15,7 @@ import {
 	Control,
 } from 'dooringx-lib';
 import { FormattedMessage } from 'react-intl';
-import { InsertRowBelowOutlined } from '@ant-design/icons';
+import { InsertRowBelowOutlined, CalendarOutlined } from '@ant-design/icons';
 import { useContext } from 'react';
 import { configContext } from '@/layouts';
 import { useCallback } from 'react';
@@ -25,8 +25,8 @@ export const HeaderHeight = '40px';
 const footerConfig = function () {
 	return (
 		<>
-			<Popover content={'快捷键'} title={null} trigger="hover">
-				<Button type="text" icon={<InsertRowBelowOutlined />}></Button>
+			<Popover content={'日历'} title={null} trigger="hover">
+				<Button type="text" icon={<CalendarOutlined />}></Button>
 			</Popover>
 			<Popover content={'快捷键'} title={null} trigger="hover">
 				<Button type="text" icon={<InsertRowBelowOutlined />}></Button>
@@ -74,7 +74,7 @@ export default function IndexPage() {
 				}}
 			>
 				<div style={{ height: '100%' }}>
-					<LeftConfig footerConfig={footerConfig()} config={config}></LeftConfig>
+					<LeftConfig mode="vertical" footerConfig={footerConfig()} config={config}></LeftConfig>
 				</div>
 
 				<ContainerWrapper config={config}>
diff --git a/packages/dooringx-lib/src/components/leftConfig.tsx b/packages/dooringx-lib/src/components/leftConfig.tsx
index 9ec4bee..e0ed381 100644
--- a/packages/dooringx-lib/src/components/leftConfig.tsx
+++ b/packages/dooringx-lib/src/components/leftConfig.tsx
@@ -13,16 +13,18 @@ import { DoubleLeftOutlined, DoubleRightOutlined, SearchOutlined } from '@ant-de
 
 import styles from '../index.less';
 
+declare type modeType = 'horizontal' | 'vertical';
 interface LeftConfigProps {
 	config: UserConfig;
 	footerConfig?: ReactNode;
+	mode?: modeType | undefined;
 }
 
 /**
  *
  * 注册加载左侧组件方法，由于异步拉取，所以要异步加载
  * 不同tab页可以使用不同type区分
- * @param {*} props
+ * @param {*} props -LeftConfigProps options可选项： mode:'horizontal' | 'vertical' icon与文案展示方向 ;footerConfig:底部功能配置ReactNode类型；
  * @returns
  */
 function LeftConfig(props: LeftConfigProps) {
@@ -158,7 +160,7 @@ function LeftConfig(props: LeftConfigProps) {
 								key={i}
 								onClick={() => setMenuSelect(i + '')}
 								icon={v.icon}
-								className={`${styles.menuStyle}`}
+								className={props.mode === 'vertical' ? `${styles.menuStyle}` : ''}
 							>
 								{v.displayName}
 							</Menu.Item>
diff --git a/packages/dooringx-lib/src/index.less b/packages/dooringx-lib/src/index.less
index e47cdc6..57cd97f 100644
--- a/packages/dooringx-lib/src/index.less
+++ b/packages/dooringx-lib/src/index.less
@@ -168,6 +168,7 @@
 	flex-direction: column !important;
 	justify-content: center !important;
 	height: auto !important;
+	padding-top: 8px !important;
 }
 .menu_footer {
 	display: flex;