diff --git a/src/blazor/admin/BootstrapAdmin.Web/Components/AdminLogin.razor b/src/blazor/admin/BootstrapAdmin.Web/Components/AdminLogin.razor
new file mode 100644
index 00000000..7e309b4e
--- /dev/null
+++ b/src/blazor/admin/BootstrapAdmin.Web/Components/AdminLogin.razor
@@ -0,0 +1,41 @@
+<form method="post" class="form-signin" data-mobile="@UseMobileLogin" action="@PostUrl" @ref="LoginForm">
+    <h2 class="form-signin-heading">@Title</h2>
+    <div class="login-wrap">
+        @if (UseMobileLogin)
+        {
+            <SMSButton />
+        }
+        else
+        {
+            <BootstrapInputGroup>
+                <BootstrapInputGroupIcon Icon="fa fa-fw fa-user" />
+                <BootstrapInput TValue="string" name="userName" maxlength="16" title="登录账号不可为空" Value="@UserName" IsAutoFocus="true" PlaceHolder="登录账号" />
+            </BootstrapInputGroup>
+            <BootstrapInputGroup class="mt-3">
+                <BootstrapInputGroupIcon Icon="fa fa-fw fa-lock" />
+                <BootstrapPassword name="password" title="登录密码不可为空" PlaceHolder="登录密码" Value="@Password" />
+            </BootstrapInputGroup>
+        }
+        <div class="d-flex justify-content-between mt-3">
+            <Checkbox @bind-Value="RememberPassword" Color="Color.Primary" ShowAfterLabel="true" DisplayText="记住密码自动登录" OnValueChanged="OnRememberPassword" />
+            <Block Condition="AllowMobile">
+                <SwitchButton @bind-ToggleState="UseMobileLogin" OnClick="OnClickSwitchButton" OffText="短信验证登录" OnText="用户密码登录" />
+            </Block>
+        </div>
+        <button class="btn-login btn-lg btn-block mt-3" data-bs-toggle="tooltip" title="不填写密码默认使用 Gitee 认证">登 录</button>
+        <div class="d-flex justify-content-between mt-3">
+            <LinkButton Text="申请账号" OnClick="OnSignUp" />
+            <LinkButton Text="忘记密码" OnClick="OnForgotPassword" />
+        </div>
+        <Block Condition="AllowOAuth">
+            <Divider Text="其他方式登录" />
+            <div class="login-list">
+                <LinkButton Url="Account/Gitee" Title="使用 Gitee 帐号登录" ImageUrl="images/gitee.svg" />
+                <LinkButton Url="Account/Gitee" Title="使用 GitHub 帐号登录" ImageUrl="images/git.svg" />
+                <LinkButton Url="#" Title="微信-暂未实现" ImageUrl="images/weixin-2.svg" />
+                <LinkButton Url="Account/Tencent" Title="使用 QQ 账号登录" ImageUrl="images/qq.svg" />
+                <LinkButton Url="Account/Alipay" Title="使用支付宝账号登录" ImageUrl="images/zhifubao.svg" />
+            </div>
+        </Block>
+    </div>
+</form>
diff --git a/src/blazor/admin/BootstrapAdmin.Web/Components/AdminLogin.razor.cs b/src/blazor/admin/BootstrapAdmin.Web/Components/AdminLogin.razor.cs
new file mode 100644
index 00000000..396e2d79
--- /dev/null
+++ b/src/blazor/admin/BootstrapAdmin.Web/Components/AdminLogin.razor.cs
@@ -0,0 +1,95 @@
+using BootstrapAdmin.Web.Core;
+using Microsoft.JSInterop;
+
+namespace BootstrapAdmin.Web.Components;
+
+public partial class AdminLogin
+{
+    private string? Title { get; set; }
+
+    private bool AllowMobile { get; set; } = true;
+
+    private bool UseMobileLogin { get; set; }
+
+    private bool AllowOAuth { get; set; } = true;
+
+    private bool RememberPassword { get; set; }
+
+    private ElementReference LoginForm { get; set; }
+
+    private string? PostUrl { get; set; }
+
+    [Parameter]
+    public string? ReturnUrl { get; set; }
+
+    [Inject]
+    [NotNull]
+    private IDict? DictsService { get; set; }
+
+    private string? UserName { get; set; }
+
+    private string? Password { get; set; }
+
+    [Inject]
+    [NotNull]
+    private IJSRuntime? JSRuntime { get; set; }
+
+    /// <summary>
+    /// 
+    /// </summary>
+    protected override void OnInitialized()
+    {
+        base.OnInitialized();
+
+        Title = DictsService.GetWebTitle();
+
+        PostUrl = QueryHelper.AddQueryString("/Account/Login", "ReturnUrl", ReturnUrl ?? "");
+
+#if DEBUG
+        UserName = "Admin";
+        Password = "123789";
+#endif
+    }
+
+    void OnClickSwitchButton()
+    {
+        var rem = RememberPassword ? "true" : "false";
+        PostUrl = QueryHelper.AddQueryString(UseMobileLogin ? "/Account/Mobile" : "/Account/Login", new Dictionary<string, string?>()
+        {
+            [nameof(ReturnUrl)] = ReturnUrl,
+            ["remember"] = rem
+        });
+    }
+
+    /// <summary>
+    /// OnAfterRenderAsync 方法
+    /// </summary>
+    /// <param name="firstRender"></param>
+    /// <returns></returns>
+    protected override async Task OnAfterRenderAsync(bool firstRender)
+    {
+        await base.OnAfterRenderAsync(firstRender);
+
+        if (firstRender)
+        {
+            // register javascript
+            await JSRuntime.InvokeVoidAsync("$.login", LoginForm, "api/Login");
+        }
+    }
+
+    Task OnRememberPassword(bool remember)
+    {
+        OnClickSwitchButton();
+        return Task.CompletedTask;
+    }
+
+    void OnSignUp()
+    {
+
+    }
+
+    void OnForgotPassword()
+    {
+
+    }
+}
diff --git a/src/blazor/admin/BootstrapAdmin.Web/Components/AdminLogin.razor.css b/src/blazor/admin/BootstrapAdmin.Web/Components/AdminLogin.razor.css
new file mode 100644
index 00000000..9e3571be
--- /dev/null
+++ b/src/blazor/admin/BootstrapAdmin.Web/Components/AdminLogin.razor.css
@@ -0,0 +1,116 @@
+.form-signin-heading {
+    margin: 0;
+    padding: 20px 15px;
+    text-align: center;
+    background-color: #41cac0;
+    border-radius: 5px 5px 0 0;
+    color: #fff;
+}
+
+.login-wrap {
+    display: flex;
+    flex-direction: column;
+    margin: 1rem;
+}
+
+    .login-wrap .card, .login-wrap .card:hover, .modal .card, .modal .card:hover {
+        border: 1px solid #84bbe2;
+    }
+
+::deep .btn-login {
+    background: #f67a6e;
+    border-color: transparent;
+    color: #fff;
+    text-transform: uppercase;
+    font-weight: 300;
+    font-family: 'Open Sans', sans-serif;
+    box-shadow: 0 4px #e56b60;
+    line-height: 1;
+}
+
+    ::deep .btn-login:focus {
+        box-shadow: 0 4px #e56b60;
+    }
+
+::deep .input-group-text {
+    background-color: #6bc3f4;
+    border-color: #1ca0e9;
+}
+
+::deep .form-check-label {
+    color: #212529;
+}
+
+::deep .form-control {
+    border-color: #1ca0e9 !important;
+}
+
+::deep .divider-wrap {
+    background-color: #7c86bb;
+}
+
+::deep .divider-text {
+    background-color: #a7daf9;
+}
+
+.login-list {
+    display: flex;
+    justify-content: space-between;
+}
+
+    .login-list ::deep img {
+        width: 32px;
+        height: 32px;
+    }
+
+::deep .btn-sms {
+    width: 140px;
+}
+
+@media (max-width: 767px) {
+    .form-signin {
+        margin: 0 auto;
+        background: #fff;
+        border-radius: 5px;
+        max-width: 320px;
+        border: solid 1px #ddd;
+        box-shadow: 0 0 10px rgba(0, 0, 0, 0.125);
+    }
+}
+
+@media (min-width: 768px) {
+    .form-signin-heading {
+        padding: 28px 0;
+        background-color: transparent;
+    }
+
+    .login-wrap {
+        width: 300px;
+        height: 274px;
+        position: relative;
+        left: 346px;
+        justify-content: center;
+    }
+
+    .slidercaptcha {
+        width: 300px;
+    }
+
+        .slidercaptcha, .slidercaptcha.oauth {
+            height: 280px;
+        }
+
+            .slidercaptcha.card .card-body {
+                padding: 15px 15px 0 15px;
+            }
+
+    .login-footer {
+        width: 100%;
+        display: flex;
+        justify-content: space-around;
+    }
+
+        .login-footer .login-footer-body li a {
+            color: #e0e0e0;
+        }
+}
diff --git a/src/blazor/admin/BootstrapAdmin.Web/Pages/Account/Login.razor b/src/blazor/admin/BootstrapAdmin.Web/Pages/Account/Login.razor
index cc2bc25f..0fd0ad1e 100644
--- a/src/blazor/admin/BootstrapAdmin.Web/Pages/Account/Login.razor
+++ b/src/blazor/admin/BootstrapAdmin.Web/Pages/Account/Login.razor
@@ -3,46 +3,6 @@
 
 <div class="wrap">
     <div class="container">
-        <form method="post" class="form-signin" data-mobile="@UseMobileLogin" action="@PostUrl" @ref="LoginForm">
-            <h2 class="form-signin-heading">@Title</h2>
-            <div class="login-wrap">
-                @if (UseMobileLogin)
-                {
-                    <SMSButton />
-                }
-                else
-                {
-                    <BootstrapInputGroup>
-                        <BootstrapInputGroupIcon Icon="fa fa-fw fa-user" />
-                        <BootstrapInput TValue="string" name="userName" maxlength="16" title="登录账号不可为空" Value="@UserName" IsAutoFocus="true" PlaceHolder="登录账号" />
-                    </BootstrapInputGroup>
-                    <BootstrapInputGroup class="mt-3">
-                        <BootstrapInputGroupIcon Icon="fa fa-fw fa-lock" />
-                        <BootstrapPassword name="password" title="登录密码不可为空" PlaceHolder="登录密码" Value="@Password" />
-                    </BootstrapInputGroup>
-                }
-                <div class="d-flex justify-content-between mt-3">
-                    <Checkbox @bind-Value="RememberPassword" Color="Color.Primary" ShowAfterLabel="true" DisplayText="记住密码自动登录" OnValueChanged="OnRememberPassword" />
-                    <Block Condition="AllowMobile">
-                        <SwitchButton @bind-ToggleState="UseMobileLogin" OnClick="OnClickSwitchButton" OffText="短信验证登录" OnText="用户密码登录" />
-                    </Block>
-                </div>
-                <button class="btn-login btn-lg btn-block mt-3" data-bs-toggle="tooltip" title="不填写密码默认使用 Gitee 认证">登 录</button>
-                <div class="d-flex justify-content-between mt-3">
-                    <LinkButton Text="申请账号" OnClick="OnSignUp" />
-                    <LinkButton Text="忘记密码" OnClick="OnForgotPassword" />
-                </div>
-                <Block Condition="AllowOAuth">
-                    <Divider Text="其他方式登录" />
-                    <div class="login-list">
-                        <LinkButton Url="Account/Gitee" Title="使用 Gitee 帐号登录" ImageUrl="images/gitee.svg" />
-                        <LinkButton Url="Account/Gitee" Title="使用 GitHub 帐号登录" ImageUrl="images/git.svg" />
-                        <LinkButton Url="#" Title="微信-暂未实现" ImageUrl="images/weixin-2.svg" />
-                        <LinkButton Url="Account/Tencent" Title="使用 QQ 账号登录" ImageUrl="images/qq.svg" />
-                        <LinkButton Url="Account/Alipay" Title="使用支付宝账号登录" ImageUrl="images/zhifubao.svg" />
-                    </div>
-                </Block>
-            </div>
-        </form>
+        <AdminLogin ReturnUrl="@ReturnUrl" />
     </div>
 </div>
\ No newline at end of file
diff --git a/src/blazor/admin/BootstrapAdmin.Web/Pages/Account/Login.razor.cs b/src/blazor/admin/BootstrapAdmin.Web/Pages/Account/Login.razor.cs
index a928e302..c3245b80 100644
--- a/src/blazor/admin/BootstrapAdmin.Web/Pages/Account/Login.razor.cs
+++ b/src/blazor/admin/BootstrapAdmin.Web/Pages/Account/Login.razor.cs
@@ -1,99 +1,11 @@
-using BootstrapAdmin.Web.Core;
-using Microsoft.JSInterop;
-
-namespace BootstrapAdmin.Web.Pages.Account;
+namespace BootstrapAdmin.Web.Pages.Account;
 
 /// <summary>
 /// 
 /// </summary>
 public partial class Login
 {
-    private string? Title { get; set; }
-
-    private bool AllowMobile { get; set; } = true;
-
-    private bool UseMobileLogin { get; set; }
-
-    private bool AllowOAuth { get; set; } = true;
-
-    private bool RememberPassword { get; set; }
-
-    private ElementReference LoginForm { get; set; }
-
-    private string? PostUrl { get; set; }
-
     [SupplyParameterFromQuery]
     [Parameter]
     public string? ReturnUrl { get; set; }
-
-    [Inject]
-    [NotNull]
-    private IDict? DictsService { get; set; }
-
-    [Inject]
-    [NotNull]
-    private IJSRuntime? JSRuntime { get; set; }
-
-    private string? UserName { get; set; }
-
-    private string? Password { get; set; }
-
-    /// <summary>
-    /// 
-    /// </summary>
-    protected override void OnInitialized()
-    {
-        base.OnInitialized();
-
-        Title = DictsService.GetWebTitle();
-
-        PostUrl = QueryHelper.AddQueryString("/Account/Login", "ReturnUrl", ReturnUrl ?? "");
-
-#if DEBUG
-        UserName = "Admin";
-        Password = "123789";
-#endif
-    }
-
-    /// <summary>
-    /// OnAfterRenderAsync 方法
-    /// </summary>
-    /// <param name="firstRender"></param>
-    /// <returns></returns>
-    protected override async Task OnAfterRenderAsync(bool firstRender)
-    {
-        await base.OnAfterRenderAsync(firstRender);
-
-        if (firstRender)
-        {
-            // register javascript
-            await JSRuntime.InvokeVoidAsync("$.login", LoginForm, "api/Login");
-        }
-    }
-
-    void OnClickSwitchButton()
-    {
-        var rem = RememberPassword ? "true" : "false";
-        PostUrl = QueryHelper.AddQueryString(UseMobileLogin ? "/Account/Mobile" : "/Account/Login", new Dictionary<string, string?>()
-        {
-            [nameof(ReturnUrl)] = ReturnUrl,
-            ["remember"] = rem
-        });
-    }
-
-    Task OnRememberPassword(bool remember)
-    {
-        OnClickSwitchButton();
-        return Task.CompletedTask;
-    }
-
-    void OnSignUp()
-    {
-
-    }
-
-    void OnForgotPassword()
-    {
-
-    }
 }
diff --git a/src/blazor/admin/BootstrapAdmin.Web/Pages/Account/Login.razor.css b/src/blazor/admin/BootstrapAdmin.Web/Pages/Account/Login.razor.css
index d00d06ab..fd9f233b 100644
--- a/src/blazor/admin/BootstrapAdmin.Web/Pages/Account/Login.razor.css
+++ b/src/blazor/admin/BootstrapAdmin.Web/Pages/Account/Login.razor.css
@@ -6,86 +6,6 @@
     bottom: 0;
 }
 
-.form-signin-heading {
-    margin: 0;
-    padding: 20px 15px;
-    text-align: center;
-    background-color: #41cac0;
-    border-radius: 5px 5px 0 0;
-    color: #fff;
-}
-
-.login-wrap {
-    display: flex;
-    flex-direction: column;
-    margin: 1rem;
-}
-
-    .login-wrap .card, .login-wrap .card:hover, .modal .card, .modal .card:hover {
-        border: 1px solid #84bbe2;
-    }
-
-::deep .btn-login {
-    background: #f67a6e;
-    border-color: transparent;
-    color: #fff;
-    text-transform: uppercase;
-    font-weight: 300;
-    font-family: 'Open Sans', sans-serif;
-    box-shadow: 0 4px #e56b60;
-    line-height: 1;
-}
-
-    ::deep .btn-login:focus {
-        box-shadow: 0 4px #e56b60;
-    }
-
-::deep .input-group-text {
-    background-color: #6bc3f4;
-    border-color: #1ca0e9;
-}
-
-::deep .form-check-label {
-    color: #212529;
-}
-
-::deep .form-control {
-    border-color: #1ca0e9 !important;
-}
-
-::deep .divider-wrap {
-    background-color: #7c86bb;
-}
-
-::deep .divider-text {
-    background-color: #a7daf9;
-}
-
-.login-list {
-    display: flex;
-    justify-content: space-between;
-}
-
-    .login-list ::deep img {
-        width: 32px;
-        height: 32px;
-    }
-
-::deep .btn-sms {
-    width: 140px;
-}
-
-@media (max-width: 767px) {
-    .form-signin {
-        margin: 0 auto;
-        background: #fff;
-        border-radius: 5px;
-        max-width: 320px;
-        border: solid 1px #ddd;
-        box-shadow: 0 0 10px rgba(0, 0, 0, 0.125);
-    }
-}
-
 @media (min-width: 768px) {
     .wrap {
         background-color: #5bc0de;
@@ -101,39 +21,4 @@
         margin: 0 auto;
         margin-top: calc(100vh / 2 - 190px);
     }
-
-    .form-signin-heading {
-        padding: 28px 0;
-        background-color: transparent;
-    }
-
-    .login-wrap {
-        width: 300px;
-        height: 274px;
-        position: relative;
-        left: 346px;
-        justify-content: center;
-    }
-
-    .slidercaptcha {
-        width: 300px;
-    }
-
-        .slidercaptcha, .slidercaptcha.oauth {
-            height: 280px;
-        }
-
-            .slidercaptcha.card .card-body {
-                padding: 15px 15px 0 15px;
-            }
-
-    .login-footer {
-        width: 100%;
-        display: flex;
-        justify-content: space-around;
-    }
-
-        .login-footer .login-footer-body li a {
-            color: #e0e0e0;
-        }
 }