diff --git a/packages/user-panel/src/UserLogin.tsx b/packages/user-panel/src/UserLogin.tsx
new file mode 100644
index 00000000..105cb61e
--- /dev/null
+++ b/packages/user-panel/src/UserLogin.tsx
@@ -0,0 +1,40 @@
+import React from 'react';
+import type { FC } from 'react';
+import type { LayoutProps } from './layout';
+import type { LoginParamsType } from './type';
+import Layout from './layout';
+import Login from './login';
+
+export interface UserLoginProps extends Omit<LayoutProps, 'type'> {
+  /**
+   * 获取校验码方法
+   */
+  onClickCaptcha?: (mobile: string) => Promise<boolean>;
+  /**
+   * 登录方法
+   */
+  onLoginSubmit?: (values: LoginParamsType) => Promise<void>;
+}
+
+const UserLogin: FC<UserLoginProps> = ({
+  onClickCaptcha,
+  onLoginSubmit,
+  logo,
+  logoUrl,
+  wechatLogin,
+  showFooter,
+}) => {
+  return (
+    <Layout
+      logoUrl={logoUrl}
+      logo={logo}
+      showFooter={showFooter}
+      wechatLogin={wechatLogin}
+      type={'login'}
+    >
+      <Login onClickCaptcha={onClickCaptcha} handleSubmit={onLoginSubmit} />
+    </Layout>
+  );
+};
+
+export default UserLogin;
diff --git a/packages/user-panel/src/components/Footer/index.tsx b/packages/user-panel/src/components/Footer/index.tsx
index 5762c3b1..e0b4f6f3 100644
--- a/packages/user-panel/src/components/Footer/index.tsx
+++ b/packages/user-panel/src/components/Footer/index.tsx
@@ -5,15 +5,23 @@ import { Typography, Divider } from 'antd';
 import WechatLogin from '../WechatLogin';
 
 import { useFormatMessage } from '../../hooks';
+import type { PanelContentType } from '../../type';
 
 import './style.less';
 
 const { Text } = Typography;
 interface FooterProps {
-  type: 'login' | 'register' | 'forgot';
+  /**
+   * 类型
+   */
+  type: PanelContentType;
+  /**
+   * 微信登录方法
+   */
+  wechatLogin?;
 }
 
-const Footer: FC<FooterProps> = ({ type }) => {
+const Footer: FC<FooterProps> = ({ type, wechatLogin }) => {
   const f = useFormatMessage();
 
   return (
@@ -21,7 +29,7 @@ const Footer: FC<FooterProps> = ({ type }) => {
       <Divider dashed className="avx-user-panel-footer-divider">
         {f('login.or')}
       </Divider>
-      <WechatLogin />
+      {wechatLogin ? <WechatLogin login={wechatLogin} /> : null}
       <div className="avx-user-panel-footer-other">
         <Text>
           {f(type === 'login' ? 'login.no-account' : 'register.have-account')}
diff --git a/packages/user-panel/src/components/WechatLogin/index.test.tsx b/packages/user-panel/src/components/WechatLogin/index.test.tsx
index c9635fcb..17599deb 100644
--- a/packages/user-panel/src/components/WechatLogin/index.test.tsx
+++ b/packages/user-panel/src/components/WechatLogin/index.test.tsx
@@ -18,7 +18,7 @@ describe('WechatLogin 组件', () => {
     const fn = jest.fn();
     const { findByTestId } = render(
       <IntlWrapper>
-        <WechatLogin onClick={fn} />
+        <WechatLogin login={fn} />
       </IntlWrapper>,
     );
     const btn = await findByTestId('wechat-btn');
diff --git a/packages/user-panel/src/components/WechatLogin/index.tsx b/packages/user-panel/src/components/WechatLogin/index.tsx
index 9bb1ad91..3e3492f0 100644
--- a/packages/user-panel/src/components/WechatLogin/index.tsx
+++ b/packages/user-panel/src/components/WechatLogin/index.tsx
@@ -9,13 +9,13 @@ import './style.less';
 
 interface IWechatLoginProps {
   disabled?: boolean;
-  onClick?: () => void;
+  login?: () => void;
 }
-const WechatLogin: FC<IWechatLoginProps> = ({ onClick }) => {
+const WechatLogin: FC<IWechatLoginProps> = ({ login }) => {
   const f = useFormatMessage();
   const handleWeChatClick = () => {
-    if (onClick) {
-      onClick();
+    if (login) {
+      login();
     } else {
       const errorMsg = f('login.wechat-login.function.error');
 
diff --git a/packages/user-panel/src/index.ts b/packages/user-panel/src/index.ts
new file mode 100644
index 00000000..74d0b9a4
--- /dev/null
+++ b/packages/user-panel/src/index.ts
@@ -0,0 +1,7 @@
+import UserLogin from './UserLogin';
+
+const UserPanel = {
+  Login: UserLogin,
+};
+
+export default UserPanel;
diff --git a/packages/user-panel/src/index.tsx b/packages/user-panel/src/index.tsx
deleted file mode 100644
index 0610f963..00000000
--- a/packages/user-panel/src/index.tsx
+++ /dev/null
@@ -1,48 +0,0 @@
-import React from 'react';
-
-import { IntlWrapper, Header, Footer } from './components';
-import Login from './login';
-import './style.less';
-
-import type { FC } from 'react';
-import type { LoginParamsType } from './type';
-
-export interface UserPanelProps {
-  /**
-   * 获取校验码方法
-   */
-  onClickCaptcha?: (mobile: string) => Promise<boolean>;
-  /**
-   * 登录方法
-   */
-  onLoginSubmit?: (values: LoginParamsType) => Promise<void>;
-
-  /**
-   * logo 链接
-   */
-  logo?: string;
-  /**
-   * 点击 logo 跳转的 URL
-   */
-  logoUrl?: string;
-}
-
-const UserPanel: FC<UserPanelProps> = ({
-  onClickCaptcha,
-  onLoginSubmit,
-  logo,
-  logoUrl,
-}) => {
-  const type = 'login';
-  return (
-    <IntlWrapper>
-      <div className="avx-user-panel-container">
-        <Header type={type} logo={logo} url={logoUrl} />
-        <Login onClickCaptcha={onClickCaptcha} handleSubmit={onLoginSubmit} />
-        <Footer type={type} />
-      </div>
-    </IntlWrapper>
-  );
-};
-
-export default UserPanel;
diff --git a/packages/user-panel/src/layout/index.tsx b/packages/user-panel/src/layout/index.tsx
new file mode 100644
index 00000000..740b0e93
--- /dev/null
+++ b/packages/user-panel/src/layout/index.tsx
@@ -0,0 +1,49 @@
+import React from 'react';
+import type { FC } from 'react';
+import { IntlWrapper, Header, Footer } from '../components';
+import './style.less';
+import type { PanelContentType } from '../type';
+
+export interface LayoutProps {
+  /**
+   * 微信登录方法
+   */
+  wechatLogin?: () => void;
+  /**
+   * logo 链接
+   */
+  logo?: string;
+  /**
+   * 点击 logo 跳转的 URL
+   */
+  logoUrl?: string;
+  /**
+   * 显示底部
+   */
+  showFooter?: boolean;
+  /**
+   * 内容类型
+   */
+  type: PanelContentType;
+}
+
+const Layout: FC<LayoutProps> = ({
+  logo,
+  logoUrl,
+  wechatLogin,
+  children,
+  showFooter,
+  type,
+}) => {
+  return (
+    <IntlWrapper>
+      <div className="avx-user-panel-container">
+        <Header type={type} logo={logo} url={logoUrl} />
+        {children}
+        {showFooter ? <Footer type={type} wechatLogin={wechatLogin} /> : null}
+      </div>
+    </IntlWrapper>
+  );
+};
+
+export default Layout;
diff --git a/packages/user-panel/src/style.less b/packages/user-panel/src/layout/style.less
similarity index 92%
rename from packages/user-panel/src/style.less
rename to packages/user-panel/src/layout/style.less
index 4b575c32..9056d85b 100644
--- a/packages/user-panel/src/style.less
+++ b/packages/user-panel/src/layout/style.less
@@ -2,7 +2,7 @@
   &-container {
     z-index: 2;
     width: 480px;
-    padding: 36px 64px;
+    padding: 48px 64px;
     background: white;
     border-radius: 4px;
     box-shadow: 0 24px 36px hsla(210, 20%, 39%, 0.16);
diff --git a/packages/user-panel/src/login/index.tsx b/packages/user-panel/src/login/index.tsx
index 2c4d75cc..55513c1e 100644
--- a/packages/user-panel/src/login/index.tsx
+++ b/packages/user-panel/src/login/index.tsx
@@ -22,6 +22,7 @@ export type LoginProps = {
   onClickCaptcha?: (mobile: string) => Promise<boolean>;
   handleSubmit?: (values: LoginParamsType) => Promise<void>;
   captchaCountDown?: number;
+  forgotUrl?: string;
 };
 
 const Login: React.FC<LoginProps> = (props) => {
@@ -30,6 +31,7 @@ const Login: React.FC<LoginProps> = (props) => {
     onClickCaptcha,
     handleSubmit,
     captchaCountDown,
+    forgotUrl,
   } = props;
   const { status, type: loginType } = userLogin;
   const [type, setType] = useState<string>('account');
@@ -183,13 +185,16 @@ const Login: React.FC<LoginProps> = (props) => {
           <ProFormCheckbox noStyle name="autoLogin">
             {f('login.rememberMe')}
           </ProFormCheckbox>
-          <a
-            style={{
-              float: 'right',
-            }}
-          >
-            {f('login.forgotPassword')}
-          </a>
+          {forgotUrl ? (
+            <a
+              style={{
+                float: 'right',
+              }}
+              href={forgotUrl}
+            >
+              {f('login.forgotPassword')}
+            </a>
+          ) : null}
         </div>
       </ProForm>
     </div>
diff --git a/packages/user-panel/src/type.ts b/packages/user-panel/src/type.ts
index 5ef6fe73..0ac6ebc9 100644
--- a/packages/user-panel/src/type.ts
+++ b/packages/user-panel/src/type.ts
@@ -13,6 +13,8 @@ export type LoginParamsType = {
   captcha: string;
 };
 
+export type PanelContentType = 'login' | 'register' | 'forgot';
+
 export type LocalesType = 'en-US' | 'zh-CN';
 export type LocaleMessages = typeof messages;
 export type LocaleKey = keyof LocaleMessages;