🎨 chore: 优化组件架构

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;

packages/user-panel/src/components/Footer/index.tsx

@@ -5,23 +5,31 @@ 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 (
     <div className="avx-user-panel-footer">
       <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')}

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');

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');
 

packages/user-panel/src/index.ts

@@ -0,0 +1,7 @@
+import UserLogin from './UserLogin';
+
+const UserPanel = {
+  Login: UserLogin,
+};
+
+export default UserPanel;

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;

packages/user-panel/src/style.less → 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);

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>

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;