diff --git a/packages/flat-components/src/components/LoginPage/LoginChannel/index.tsx b/packages/flat-components/src/components/LoginPage/LoginChannel/index.tsx
index 487217b0553..8d82a6fe008 100644
--- a/packages/flat-components/src/components/LoginPage/LoginChannel/index.tsx
+++ b/packages/flat-components/src/components/LoginPage/LoginChannel/index.tsx
@@ -16,11 +16,11 @@ export const LoginChannel: React.FC<LoginChannelProps> = ({ onLogin }) => {
         <div className="login-channel-container">
             <Button onClick={() => onLogin("wechat")} className="login-channel-wechat">
                 <img src={wechatSVG} />
-                微信登陆
+                微信登录
             </Button>
             <Button onClick={() => onLogin("github")} className="login-channel-github">
                 <img src={githubSVG} />
-                GitHub登陆
+                GitHub登录
             </Button>
         </div>
     );
diff --git a/packages/flat-components/src/components/LoginPage/LoginContent/index.tsx b/packages/flat-components/src/components/LoginPage/LoginContent/index.tsx
index e65dad647ab..71ad9617eee 100644
--- a/packages/flat-components/src/components/LoginPage/LoginContent/index.tsx
+++ b/packages/flat-components/src/components/LoginPage/LoginContent/index.tsx
@@ -55,7 +55,7 @@ export const LoginContent: React.FC<LoginContentProps> = ({ onLogin }) => {
                         <div className="qr-code-container">
                             <div className="qr-code">{inPageLogin}</div>
                             <a className="qr-code-link" onClick={() => setInPageLogin(void 0)}>
-                                使用其他方式登陆
+                                使用其他方式登录
                             </a>
                         </div>
                     </div>
diff --git a/packages/flat-components/src/components/LoginPage/LoginPanel.stories.tsx b/packages/flat-components/src/components/LoginPage/LoginPanel.stories.tsx
new file mode 100644
index 00000000000..b6b11c6c158
--- /dev/null
+++ b/packages/flat-components/src/components/LoginPage/LoginPanel.stories.tsx
@@ -0,0 +1,56 @@
+import QRCodeSVG from "./icons/qr-code.svg";
+
+import { Meta, Story } from "@storybook/react";
+import { Modal } from "antd";
+import React from "react";
+import { LoginChannelType, LoginPanel, LoginPanelProps } from ".";
+
+const storyMeta: Meta = {
+    title: "LoginPage/LoginPanel",
+    component: LoginPanel,
+    parameters: {
+        layout: "fullscreen",
+        viewport: {
+            viewports: {
+                desktop: {
+                    name: "Desktop",
+                    styles: { width: "960px", height: "640px" },
+                },
+                web: {
+                    name: "Web",
+                    styles: { width: "1440px", height: "674px" },
+                },
+            },
+            defaultViewport: "desktop",
+        },
+        options: {
+            showPanel: false,
+        },
+    },
+};
+
+export default storyMeta;
+
+const handleLogin = (loginChannel: LoginChannelType): React.ReactElement | undefined => {
+    switch (loginChannel) {
+        case "wechat": {
+            return <img src={QRCodeSVG} />;
+        }
+        case "github": {
+            Modal.info({ content: "This is Github Login" });
+            return;
+        }
+        default: {
+            return;
+        }
+    }
+};
+
+export const PlayableExample: Story<LoginPanelProps> = args => (
+    <div className="vh-100">
+        <LoginPanel {...args} />
+    </div>
+);
+PlayableExample.args = {
+    onLogin: handleLogin,
+};