diff --git a/ui/src/api/admin/system/platform-source.ts b/ui/src/api/admin/system/auth-scan-setting.ts
similarity index 71%
rename from ui/src/api/admin/system/platform-source.ts
rename to ui/src/api/admin/system/auth-scan-setting.ts
index 4e716020c81..501a7261d8f 100644
--- a/ui/src/api/admin/system/platform-source.ts
+++ b/ui/src/api/admin/system/auth-scan-setting.ts
@@ -1,25 +1,25 @@
 import { get, post, put } from '../core/request'
 import type { QrLoginPlatform, QrLoginPlatformRequest } from '@/api/types'
 
-const prefix = '/platform'
+const prefix = '/platform/source'
 
 /** 获取扫码登录平台配置。 */
 const getQrLoginPlatforms = () => {
   return get<QrLoginPlatform[]>(prefix)
 }
 
-/** 校验扫码登录平台配置是否可用。 */
-const postQrLoginPlatformConnection = (platform: QrLoginPlatformRequest) => {
-  return post<QrLoginPlatformRequest, boolean>(`${prefix}/connection`, platform)
-}
-
 /** 保存扫码登录平台配置。 */
 const putQrLoginPlatform = (platform: QrLoginPlatformRequest) => {
   return put<QrLoginPlatformRequest, boolean>(prefix, platform)
 }
 
+/** 校验扫码登录平台配置是否可用。 */
+const postValidateQrLoginPlatform = (platform: QrLoginPlatformRequest) => {
+  return post<QrLoginPlatformRequest, boolean>(`${prefix}`, platform)
+}
+
 export default {
   getQrLoginPlatforms,
-  postQrLoginPlatformConnection,
+  postValidateQrLoginPlatform,
   putQrLoginPlatform,
 }
diff --git a/ui/src/api/admin/system/chat-user-auth-scan.ts b/ui/src/api/admin/system/chat-user-auth-scan.ts
new file mode 100644
index 00000000000..7fdfc9c55b2
--- /dev/null
+++ b/ui/src/api/admin/system/chat-user-auth-scan.ts
@@ -0,0 +1,25 @@
+import { get, post, put } from '../core/request'
+import type { QrLoginPlatform, QrLoginPlatformRequest } from '@/api/types'
+
+const prefix = '/chat_user/auth/platform/source'
+
+/** 获取对话用户扫码登录平台配置。 */
+const getQrLoginPlatforms = () => {
+  return get<QrLoginPlatform[]>(prefix)
+}
+
+/** 保存对话用户扫码登录平台配置。 */
+const postQrLoginPlatform = (platform: QrLoginPlatformRequest) => {
+  return post<QrLoginPlatformRequest, boolean>(prefix, platform)
+}
+
+/** 校验对话用户扫码登录平台配置是否可用。 */
+const putValidateQrLoginPlatform = (platform: QrLoginPlatformRequest) => {
+  return put<QrLoginPlatformRequest, boolean>(prefix, platform)
+}
+
+export default {
+  getQrLoginPlatforms,
+  postQrLoginPlatform,
+  putValidateQrLoginPlatform,
+}
diff --git a/ui/src/api/admin/system/chat-user-auth.ts b/ui/src/api/admin/system/chat-user-auth.ts
new file mode 100644
index 00000000000..993e23c666d
--- /dev/null
+++ b/ui/src/api/admin/system/chat-user-auth.ts
@@ -0,0 +1,37 @@
+import { get, post, put } from '../core/request'
+import type { AuthProviderSetting, AuthProviderType, LoginAuthSetting } from '@/api/types'
+
+const prefix = '/chat_user/auth'
+
+/** 获取对话用户指定认证源配置。 */
+const getAuthSetting = (authType: AuthProviderType) => {
+  return get<Partial<AuthProviderSetting>>(`${prefix}/${authType}/detail`)
+}
+
+/** 测试对话用户认证源连接。 */
+const postAuthSettingConnection = (setting: AuthProviderSetting) => {
+  return post<AuthProviderSetting, boolean>(`${prefix}/connection`, setting)
+}
+
+/** 保存对话用户指定认证源配置。 */
+const putAuthSetting = (authType: AuthProviderType, setting: AuthProviderSetting) => {
+  return put<AuthProviderSetting, boolean>(`${prefix}/${authType}/info`, setting)
+}
+
+/** 获取对话用户登录设置。 */
+const getLoginSetting = () => {
+  return get<LoginAuthSetting>(`${prefix}/setting`)
+}
+
+/** 保存对话用户登录设置。 */
+const putLoginSetting = (setting: LoginAuthSetting) => {
+  return put<LoginAuthSetting, boolean>(`${prefix}/setting`, setting)
+}
+
+export default {
+  getAuthSetting,
+  getLoginSetting,
+  postAuthSettingConnection,
+  putAuthSetting,
+  putLoginSetting,
+}
diff --git a/ui/src/api/types/system-authentication.ts b/ui/src/api/types/system-authentication.ts
index 60be9315c83..57196ccbed0 100644
--- a/ui/src/api/types/system-authentication.ts
+++ b/ui/src/api/types/system-authentication.ts
@@ -1,3 +1,6 @@
+import type { OptionItem } from '@/api/types/common'
+import type { QrCodeProvider } from '@/api/types/login'
+
 export type AuthProviderType = 'LDAP' | 'CAS' | 'OIDC' | 'OAuth2' | 'SAML2'
 
 export interface AuthProviderSetting {
@@ -7,13 +10,8 @@ export interface AuthProviderSetting {
   is_active: boolean
 }
 
-export interface LoginMethodOption {
-  label: string
-  value: string
-}
-
 export interface LoginAuthSetting {
-  auth_types?: LoginMethodOption[]
+  auth_types?: OptionItem[]
   default_value: string
   failed_attempts: number
   group_id?: string
@@ -22,14 +20,12 @@ export interface LoginAuthSetting {
   max_attempts: number
   permission?: string
   role_id?: string
-  system_options?: LoginMethodOption[]
+  system_options?: OptionItem[]
   workspace_id?: string
 }
 
-export type QrLoginPlatformType = 'wecom' | 'dingtalk' | 'lark'
-
 export interface QrLoginPlatform {
-  auth_type: QrLoginPlatformType
+  auth_type: QrCodeProvider
   config: Record<string, string>
   is_active: boolean
   is_valid: boolean
@@ -38,5 +34,5 @@ export interface QrLoginPlatform {
 export interface QrLoginPlatformRequest {
   config: Record<string, string>
   isActive: boolean
-  key: QrLoginPlatformType
+  key: QrCodeProvider
 }
diff --git a/ui/src/assets/logo/logo_enterprise-wechat.svg b/ui/src/assets/logo/logo_enterprise-wechat.svg
new file mode 100644
index 00000000000..ea860124957
--- /dev/null
+++ b/ui/src/assets/logo/logo_enterprise-wechat.svg
@@ -0,0 +1,7 @@
+<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M26.9508 30.4241C26.7624 30.6118 26.7508 30.9095 26.9144 31.1116C26.9254 31.1254 26.9374 31.1388 26.9508 31.1522C26.9732 31.1746 26.9976 31.1938 27.0227 31.2117C27.0729 31.2584 27.1227 31.3066 27.1715 31.3554C28.1351 32.3193 28.7408 33.5049 28.9893 34.7479C28.9934 34.8177 29.001 34.8875 29.0127 34.9569C29.0247 35.0332 29.0409 35.1092 29.0612 35.1841C29.1564 35.5334 29.341 35.8637 29.6153 36.1381C30.4561 36.9789 31.8195 36.9789 32.6599 36.1381C33.5008 35.2972 33.5008 33.9342 32.6599 33.0934C32.3636 32.7967 32.002 32.6056 31.6218 32.518C31.5795 32.5083 31.5365 32.4997 31.4936 32.4929C31.4506 32.4856 31.4073 32.4795 31.3633 32.4746C30.0893 32.2375 28.8714 31.6263 27.8862 30.6407C27.815 30.5699 27.7459 30.4974 27.6792 30.4238L27.6789 30.4241C27.5782 30.3238 27.4465 30.2732 27.3149 30.2732C27.1829 30.2732 27.0512 30.3238 26.9508 30.4241Z" fill="#FB6500"/>
+<path d="M35.7037 27.0198C35.4074 27.3168 35.2163 27.6781 35.1286 28.0583C35.119 28.1006 35.1104 28.1436 35.1028 28.1865C35.096 28.2298 35.0898 28.2732 35.0853 28.3168C34.8481 29.5904 34.2369 30.8087 33.2514 31.7943C33.1802 31.8651 33.1077 31.9342 33.0345 32.0009L33.0348 32.0012C32.8337 32.2023 32.8337 32.5282 33.0348 32.7293C33.2225 32.9173 33.5198 32.9293 33.7223 32.7657C33.7357 32.7547 33.7495 32.7427 33.7625 32.7293C33.7849 32.7069 33.8045 32.6829 33.8223 32.6578C33.8691 32.6072 33.9165 32.5577 33.966 32.5086C34.9296 31.545 36.1152 30.9393 37.3582 30.6911C37.4284 30.687 37.4981 30.6795 37.5676 30.6678C37.6439 30.6557 37.7195 30.6396 37.7945 30.6186C38.1444 30.5234 38.4744 30.3395 38.7487 30.0652C39.5895 29.2243 39.5895 27.8613 38.7487 27.0198C38.3283 26.5994 37.7773 26.3894 37.2262 26.3894C36.6752 26.3894 36.1241 26.5994 35.7037 27.0198Z" fill="#3880E7"/>
+<path d="M29.6306 20.9315C28.7905 21.7723 28.7905 23.1357 29.6306 23.9765C29.9269 24.2728 30.2882 24.4643 30.6684 24.5516C30.7114 24.5612 30.7544 24.5698 30.7973 24.577C30.8406 24.5842 30.884 24.5904 30.9273 24.5949C32.2016 24.8324 33.4192 25.4433 34.4047 26.4288C34.4759 26.4997 34.545 26.5729 34.612 26.6458C34.8134 26.8469 35.139 26.8469 35.3404 26.6458C35.5285 26.4577 35.5401 26.1604 35.3765 25.9582C35.3648 25.9441 35.3531 25.9304 35.3404 25.9177C35.3181 25.895 35.2933 25.8757 35.2686 25.8585C35.218 25.8111 35.1685 25.763 35.1194 25.7142C34.1555 24.7506 33.5501 23.565 33.3013 22.3216C33.2978 22.2519 33.2899 22.1821 33.2789 22.113C33.2669 22.0367 33.25 21.9607 33.2301 21.8854C33.1342 21.5362 32.9499 21.2061 32.676 20.9315C32.2556 20.5111 31.7042 20.3007 31.1531 20.3007C30.6021 20.3007 30.051 20.5111 29.6306 20.9315Z" fill="#2DBC00"/>
+<path d="M28.5685 24.3038C28.5547 24.3155 28.541 24.3272 28.5283 24.3406C28.5056 24.3629 28.4863 24.3866 28.4684 24.4121C28.4217 24.4623 28.3739 24.5118 28.3248 24.5609C27.3612 25.5248 26.1756 26.1305 24.9322 26.3784C24.8624 26.3825 24.7927 26.3904 24.7232 26.4017C24.6469 26.4134 24.5709 26.4303 24.496 26.4509C24.1464 26.5461 23.8164 26.7304 23.5417 27.0043C22.7009 27.8455 22.7009 29.2089 23.5417 30.0497C24.3829 30.8905 25.7459 30.8905 26.5871 30.0497C26.883 29.7537 27.0749 29.3921 27.1625 29.0119C27.1718 28.9689 27.1807 28.9259 27.1873 28.883C27.1948 28.8397 27.2003 28.7964 27.2055 28.753C27.443 27.4791 28.0539 26.2611 29.0394 25.2753C29.1106 25.2044 29.1831 25.1357 29.2567 25.0687L29.2563 25.0683C29.4571 24.8672 29.4571 24.5413 29.2563 24.3406C29.1556 24.2399 29.024 24.1897 28.892 24.1897C28.7771 24.1897 28.6627 24.2278 28.5685 24.3038Z" fill="#FFCC00"/>
+<path d="M15.5511 5.69592C11.6835 6.11633 8.16861 7.77118 5.65369 10.3549C4.66092 11.3748 3.85206 12.5143 3.24911 13.7419C2.43097 15.407 2.01605 17.175 2.01605 18.9962C2.01605 21.341 2.72969 23.6527 4.07997 25.6823C4.7637 26.7105 5.8816 28.0054 6.91046 28.9177V28.9198L6.4457 32.5736C6.42714 32.6234 6.4072 32.6726 6.39586 32.7252C6.3852 32.7726 6.38211 32.8221 6.37695 32.8713C6.3742 32.9084 6.36595 32.9448 6.36595 32.9833C6.36595 33.0239 6.3742 33.0624 6.37798 33.1026C6.43917 33.7038 6.94037 34.1751 7.55776 34.1751C7.77295 34.1751 7.97198 34.1136 8.14592 34.0136C8.15142 34.0105 8.15761 34.0077 8.16277 34.0046C8.18855 33.9895 8.21433 33.9764 8.23874 33.9593L9.34907 33.402L12.6584 31.741C13.6096 32.0143 14.5536 32.1886 15.5487 32.2979C16.1957 32.369 16.8519 32.4055 17.5006 32.4055C18.1613 32.4055 18.8467 32.3656 19.5366 32.2872C20.8941 32.1329 22.1997 31.8197 23.439 31.3752C23.3049 31.3302 23.1733 31.2725 23.0457 31.1996C22.2874 30.7661 21.8952 29.9411 21.9729 29.1247C21.0873 29.4059 20.1623 29.6076 19.2066 29.7163C18.6264 29.7823 18.0523 29.8156 17.5006 29.8156C16.9578 29.8156 16.4088 29.7854 15.867 29.7259C15.7543 29.7139 15.6415 29.696 15.5288 29.6809C14.7849 29.5819 14.0499 29.4299 13.3394 29.2223C13.195 29.1762 13.0414 29.1525 12.8846 29.1525C12.6392 29.1525 12.4016 29.2175 12.161 29.3423C12.1297 29.3584 12.0984 29.3718 12.0672 29.39L9.34907 30.9919L9.23151 31.0617L9.22841 31.0631C9.16929 31.0975 9.13629 31.1105 9.10604 31.1105C9.006 31.1105 8.92522 31.0263 8.92522 30.9225L9.03007 30.4993C9.05963 30.3873 9.10122 30.2302 9.15072 30.0387C9.20985 29.8142 9.27895 29.5502 9.34907 29.2842C9.42642 28.9899 9.50376 28.6932 9.56976 28.4416C9.59727 28.3436 9.62511 28.2261 9.62511 28.0941C9.62511 27.7287 9.45082 27.3839 9.15966 27.1721C9.0115 27.0628 8.86369 26.948 8.70831 26.8215C8.47043 26.6273 8.24252 26.4255 8.02355 26.2179C7.40788 25.6338 6.86749 24.9965 6.41305 24.3134C5.34431 22.7064 4.77883 20.8827 4.77883 19.0395C4.77883 17.6088 5.10608 16.218 5.75097 14.9045C6.23326 13.9237 6.88193 13.0104 7.68048 12.1902C9.74783 10.0658 12.6553 8.70379 15.867 8.35487C16.4253 8.29437 16.9753 8.26309 17.5006 8.26309C18.052 8.26309 18.6257 8.29644 19.2066 8.36278C22.4032 8.72579 25.2935 10.095 27.3454 12.217C28.1402 13.0392 28.7858 13.9547 29.2643 14.9378C29.8989 16.2424 30.2206 17.6226 30.2206 19.0395C30.2206 19.1863 30.2113 19.3334 30.2045 19.4802C31.0333 18.9728 32.1288 19.0722 32.8473 19.7899C32.8834 19.8267 32.9139 19.8663 32.9466 19.9044C32.97 19.6026 32.9837 19.2997 32.9837 18.9962C32.9837 17.1918 32.5753 15.438 31.7703 13.7838C31.1721 12.5528 30.3671 11.4109 29.3787 10.3882C26.882 7.80658 23.3864 6.14314 19.5366 5.7052C18.8454 5.62682 18.1602 5.58694 17.5006 5.58694C16.8712 5.58694 16.2156 5.62338 15.5511 5.69592Z" fill="#0082EF"/>
+</svg>
diff --git a/ui/src/constants/auth.ts b/ui/src/constants/auth.ts
index 4534baa832a..96b409fe69b 100644
--- a/ui/src/constants/auth.ts
+++ b/ui/src/constants/auth.ts
@@ -11,3 +11,11 @@ export const LOGIN_METHOD_LABELS: Record<LoginMethod, string> = {
   lark: '飞书',
   wecom: '企业微信',
 }
+
+export const SCAN_FIELD_LABELS: Record<string, string> = {
+  agent_id: 'Agent ID',
+  app_key: 'App Key',
+  app_secret: 'App Secret',
+  callback_url: '回调地址',
+  corp_id: 'Corp ID',
+}
diff --git a/ui/src/router/admin/system/index.ts b/ui/src/router/admin/system/index.ts
index b2c9e544f69..8c0b228e6dc 100644
--- a/ui/src/router/admin/system/index.ts
+++ b/ui/src/router/admin/system/index.ts
@@ -142,7 +142,8 @@ export const systemRoutes: RouteRecordRaw = {
         {
           path: 'authentication',
           name: 'system-chat-authentication',
-          component: () => import('@/views/system/SystemView.vue'),
+          component: () =>
+            import('@/views/system/chat/authentication/AuthenticationView.vue'),
           meta: { title: '对话用户认证', order: 30 },
         },
         {
@@ -163,7 +164,7 @@ export const systemRoutes: RouteRecordRaw = {
           path: 'authentication',
           name: 'system-login-authentication',
           component: () =>
-            import('@/views/system/settings/authentication/AuthenticationSettingsView.vue'),
+            import('@/views/system/settings/authentication/AuthenticationView.vue'),
           meta: { title: '系统用户认证', order: 10 },
         },
         {
diff --git a/ui/src/styles/element-plus.scss b/ui/src/styles/element-plus.scss
index c1dccaadb61..2ab58a2c05a 100644
--- a/ui/src/styles/element-plus.scss
+++ b/ui/src/styles/element-plus.scss
@@ -17,7 +17,18 @@
   --el-color-danger-light-7: color-mix(in srgb, var(--mk-danger) 30%, white);
   --el-color-danger-light-8: color-mix(in srgb, var(--mk-danger) 20%, white);
   --el-color-danger-light-9: color-mix(in srgb, var(--mk-danger) 10%, white);
+  --el-color-danger-dark-1: color-mix(in srgb, var(--mk-danger) 85%, black);
   --el-color-success: var(--mk-success);
+  --el-color-success-light-1: color-mix(in srgb, var(--mk-success) 85%, white);
+  --el-color-success-light-3: color-mix(in srgb, var(--mk-success) 70%, white);
+  --el-color-success-light-4: color-mix(in srgb, var(--mk-success) 60%, white);
+  --el-color-success-light-5: color-mix(in srgb, var(--mk-success) 50%, white);
+  --el-color-success-light-6: color-mix(in srgb, var(--mk-success) 40%, white);
+  --el-color-success-light-7: color-mix(in srgb, var(--mk-success) 30%, white);
+  --el-color-success-light-8: color-mix(in srgb, var(--mk-success) 20%, white);
+  --el-color-success-light-9: color-mix(in srgb, var(--mk-success) 10%, white);
+  --el-color-success-dark-1: color-mix(in srgb, var(--mk-success) 85%, black);
+
   --el-color-warning: var(--mk-warning);
   --el-border-color: var(--mk-N350);
   --el-border-radius-base: 6px;
@@ -134,12 +145,21 @@
 /* card */
 .el-card {
   --el-card-border-radius: 12px;
+  overflow: visible;
+  &__body {
+    overflow: inherit;
+  }
   &.is-always-shadow {
     border: none;
   }
   &.is-never-shadow {
     border: none;
   }
+  &.is-never-shadow {
+    &:hover {
+      border-color: var(--el-color-primary);
+    }
+  }
 }
 
 .el-card.is-always-shadow,
@@ -565,6 +585,7 @@
 /* switch */
 .el-switch {
   --el-switch-off-color: var(--mk-N400);
+  height: 22px;
 }
 .el-switch--small {
   .el-switch__core {
@@ -644,10 +665,12 @@
 
 /* tag */
 .el-tag {
-  --el-tag-font-size: 14px;
   max-width: 115px;
   border: none;
   padding: 0 6px;
+  &:not(&--small) {
+    --el-tag-font-size: 14px;
+  }
 
   &__content {
     overflow: hidden;
@@ -658,6 +681,14 @@
     --el-tag-text-color: var(--el-text-color-primary) !important;
     --el-tag-bg-color: var(--mk-N900-transparent-10) !important;
   }
+  &--success {
+    --el-tag-text-color: var(--el-color-success-dark-1) !important;
+    --el-tag-bg-color: rgb(var(--mk-success-rgb) / 20%) !important;
+  }
+  &--danger {
+    --el-tag-text-color: var(--el-color-danger-dark-1) !important;
+    --el-tag-bg-color: rgb(var(--mk-danger-rgb) / 20%) !important;
+  }
   &__close {
     .el-icon {
       color: var(--el-text-color-regular);
diff --git a/ui/src/views/system/settings/authentication/AuthenticationSettingsView.vue b/ui/src/views/system/chat/authentication/AuthenticationView.vue
similarity index 95%
rename from ui/src/views/system/settings/authentication/AuthenticationSettingsView.vue
rename to ui/src/views/system/chat/authentication/AuthenticationView.vue
index a033a7a3b03..de7f6789136 100644
--- a/ui/src/views/system/settings/authentication/AuthenticationSettingsView.vue
+++ b/ui/src/views/system/chat/authentication/AuthenticationView.vue
@@ -3,7 +3,7 @@ import { ref, type Component } from 'vue'
 import LDAP from './components/LDAP.vue'
 import CAS from './components/CAS.vue'
 import OIDC from './components/OIDC.vue'
-import SCAN from './components/SCAN.vue'
+import SCAN from './components/SCANLogin.vue'
 import OAuth2 from './components/OAuth2.vue'
 import Saml2 from './components/Saml2.vue'
 import LoginSetting from './components/LoginSetting.vue'
@@ -14,7 +14,7 @@ interface AuthenticationTab {
   name: string
 }
 
-const activeName = ref('LoginSetting')
+const activeName = ref('SCAN')
 const authenticationTabs: AuthenticationTab[] = [
   { label: '登录设置', name: 'LoginSetting', component: LoginSetting },
   { label: 'LDAP', name: 'LDAP', component: LDAP },
diff --git a/ui/src/views/system/chat/authentication/EditSCANDrawer.vue b/ui/src/views/system/chat/authentication/EditSCANDrawer.vue
new file mode 100644
index 00000000000..66ee18725b6
--- /dev/null
+++ b/ui/src/views/system/chat/authentication/EditSCANDrawer.vue
@@ -0,0 +1,105 @@
+<script setup lang="ts">
+import { computed, reactive, ref, useTemplateRef } from 'vue'
+import type { FormInstance, FormRules } from 'element-plus'
+import ChatUserAuthScanApi from '@/api/admin/system/chat-user-auth-scan'
+import type { QrLoginPlatformRequest } from '@/api/types'
+import { LOGIN_METHOD_LABELS, SCAN_FIELD_LABELS } from '@/constants/auth'
+import { MsgSuccess, MsgError } from '@/utils/message'
+
+const emit = defineEmits<{ refresh: [] }>()
+const visible = ref(false)
+const loading = ref(false)
+const formRef = useTemplateRef<FormInstance>('formRef')
+const form = reactive<QrLoginPlatformRequest>({
+  key: 'wecom',
+  isActive: false,
+  config: {},
+})
+
+const rules = computed<FormRules>(() =>
+  Object.fromEntries(
+    Object.keys(form.config).map((key) => [
+      `config.${key}`,
+      [{ required: true, message: `请输入${SCAN_FIELD_LABELS[key] ?? key}`, trigger: 'blur' }],
+    ]),
+  ),
+)
+function submit() {
+  formRef.value?.validate((valid) => {
+    if (!valid) return
+
+    loading.value = true
+    ChatUserAuthScanApi.postQrLoginPlatform(form)
+      .then(() => {
+        MsgSuccess('保存成功')
+        emit('refresh')
+        close()
+      })
+      .finally(() => {
+        loading.value = false
+      })
+  })
+}
+
+/* 校验 */
+function handleValidatePlatform() {
+  loading.value = true
+  return ChatUserAuthScanApi.putValidateQrLoginPlatform(form)
+    .then((res) => {
+      // TODO: 校验判断有误
+      res ? MsgSuccess('校验成功') : MsgError('校验失败')
+    })
+    .finally(() => {
+      loading.value = false
+    })
+}
+
+function open(platform: QrLoginPlatformRequest) {
+  Object.assign(form, platform, { config: { ...platform.config } })
+  visible.value = true
+}
+
+function close() {
+  visible.value = false
+  resetData()
+}
+
+function resetData() {
+  Object.assign(form, { key: 'wecom', isActive: false, config: {} })
+  formRef.value?.resetFields()
+}
+defineExpose({ open })
+</script>
+
+<template>
+  <MkDrawer v-model="visible" :title="`${LOGIN_METHOD_LABELS[form.key]}设置`" @closed="resetData">
+    <el-form
+      ref="formRef"
+      v-loading="loading"
+      :model="form"
+      :rules="rules"
+      label-position="top"
+      require-asterisk-position="right"
+    >
+      <el-form-item
+        v-for="(_, key) in form.config"
+        :key="key"
+        :label="SCAN_FIELD_LABELS[key] ?? key"
+        :prop="`config.${key}`"
+      >
+        <el-input
+          v-model="form.config[key]"
+          :show-password="key === 'app_secret'"
+          :type="key === 'app_secret' ? 'password' : 'text'"
+          placeholder="请输入"
+        />
+      </el-form-item>
+    </el-form>
+
+    <template #footer>
+      <el-button @click="close">取消</el-button>
+      <el-button @click="handleValidatePlatform">校验</el-button>
+      <el-button type="primary" @click="submit">保存</el-button>
+    </template>
+  </MkDrawer>
+</template>
diff --git a/ui/src/views/system/chat/authentication/components/CAS.vue b/ui/src/views/system/chat/authentication/components/CAS.vue
new file mode 100644
index 00000000000..0d3214a5109
--- /dev/null
+++ b/ui/src/views/system/chat/authentication/components/CAS.vue
@@ -0,0 +1,85 @@
+<script setup lang="ts">
+import { onMounted, reactive, ref, useTemplateRef } from 'vue'
+import type { FormInstance, FormRules } from 'element-plus'
+import ChatUserAuthApi from '@/api/admin/system/chat-user-auth'
+import type { AuthProviderSetting } from '@/api/types'
+import { MsgSuccess } from '@/utils/message'
+
+defineOptions({ name: 'CasAuthenticationSetting' })
+
+const defaultRedirectUrl = `${window.location.origin}${window.MaxKB?.prefix ?? ''}/api/cas`
+const authFormRef = useTemplateRef<FormInstance>('authFormRef')
+const loading = ref(false)
+const form = reactive<AuthProviderSetting>({
+  auth_type: 'CAS',
+  config: { ldpUri: '', validateUrl: '', redirectUrl: defaultRedirectUrl },
+  is_active: false,
+})
+const rules = reactive<FormRules<AuthProviderSetting>>({
+  'config.ldpUri': [{ required: true, message: '请输入 ldpUri', trigger: 'blur' }],
+  'config.validateUrl': [{ required: true, message: '请输入验证地址', trigger: 'blur' }],
+  'config.redirectUrl': [{ required: true, message: '请输入回调地址', trigger: 'blur' }],
+})
+
+function loadSetting() {
+  loading.value = true
+
+  return ChatUserAuthApi.getAuthSetting(form.auth_type)
+    .then((setting) => {
+      const settingConfig = setting.config ?? {}
+      const ldpUri = settingConfig.ldpUri ?? ''
+
+      Object.assign(form, setting, {
+        config: {
+          ...form.config,
+          ...settingConfig,
+          validateUrl: settingConfig.validateUrl || ldpUri,
+          redirectUrl: settingConfig.redirectUrl || defaultRedirectUrl,
+        },
+      })
+    })
+    .finally(() => {
+      loading.value = false
+    })
+}
+
+function submit() {
+  authFormRef.value?.validate((valid) => {
+    if (!valid) return
+    loading.value = true
+    ChatUserAuthApi.putAuthSetting(form.auth_type, form)
+      .then(() => MsgSuccess('保存成功'))
+      .finally(() => (loading.value = false))
+  })
+}
+
+onMounted(() => loadSetting)
+</script>
+
+<template>
+  <el-form
+    ref="authFormRef"
+    v-loading="loading"
+    class="max-w-200"
+    :model="form"
+    :rules="rules"
+    label-position="top"
+  >
+    <el-form-item label="ldpUri" prop="config.ldpUri"
+      ><el-input v-model="form.config.ldpUri" placeholder="请输入 ldpUri"
+    /></el-form-item>
+    <el-form-item label="验证地址" prop="config.validateUrl"
+      ><el-input v-model="form.config.validateUrl" placeholder="请输入验证地址"
+    /></el-form-item>
+    <el-form-item label="回调地址" prop="config.redirectUrl"
+      ><el-input v-model="form.config.redirectUrl" placeholder="请输入回调地址"
+    /></el-form-item>
+    <el-form-item
+      ><div class="flex flex-col">
+        <span>启用 CAS 认证</span>
+        <el-switch v-model="form.is_active" class="self-start" />
+      </div>
+    </el-form-item>
+    <el-button type="primary" @click="submit">保存</el-button>
+  </el-form>
+</template>
diff --git a/ui/src/views/system/chat/authentication/components/LDAP.vue b/ui/src/views/system/chat/authentication/components/LDAP.vue
new file mode 100644
index 00000000000..15fac93b1fe
--- /dev/null
+++ b/ui/src/views/system/chat/authentication/components/LDAP.vue
@@ -0,0 +1,106 @@
+<script setup lang="ts">
+import { onMounted, reactive, ref, useTemplateRef } from 'vue'
+import type { FormInstance, FormRules } from 'element-plus'
+import ChatUserAuthApi from '@/api/admin/system/chat-user-auth'
+import type { AuthProviderSetting } from '@/api/types'
+import { MsgSuccess } from '@/utils/message'
+
+defineOptions({ name: 'LdapAuthenticationSetting' })
+const authFormRef = useTemplateRef<FormInstance>('authFormRef')
+const loading = ref(false)
+const form = reactive<AuthProviderSetting>({
+  auth_type: 'LDAP',
+  config: { ldap_server: '', base_dn: '', password: '', ou: '', ldap_filter: '', ldap_mapping: '' },
+  is_active: false,
+})
+const rules = reactive<FormRules<AuthProviderSetting>>({
+  'config.ldap_server': [{ required: true, message: '请输入服务器地址', trigger: 'blur' }],
+  'config.base_dn': [{ required: true, message: '请输入Bind DN', trigger: 'blur' }],
+  'config.password': [{ required: true, message: '请输入密码', trigger: 'blur' }],
+  'config.ou': [{ required: true, message: '请输入用户目录（OU）', trigger: 'blur' }],
+  'config.ldap_filter': [{ required: true, message: '请输入用户过滤器', trigger: 'blur' }],
+  'config.ldap_mapping': [{ required: true, message: '请输入字段映射', trigger: 'blur' }],
+})
+
+function loadSetting() {
+  loading.value = true
+  return ChatUserAuthApi.getAuthSetting(form.auth_type)
+    .then((setting) => {
+      const ldapMapping = setting.config?.ldap_mapping
+      Object.assign(form, setting, {
+        config: {
+          ...form.config,
+          ...setting.config,
+          ldap_mapping:
+            typeof ldapMapping === 'string' && ldapMapping
+              ? JSON.stringify(JSON.parse(ldapMapping))
+              : ldapMapping,
+        },
+      })
+    })
+    .finally(() => (loading.value = false))
+}
+function submit(action: 'save' | 'test') {
+  authFormRef.value?.validate((valid) => {
+    if (!valid) return
+    loading.value = true
+    const request =
+      action === 'test'
+        ? ChatUserAuthApi.postAuthSettingConnection(form)
+        : ChatUserAuthApi.putAuthSetting(form.auth_type, form)
+    request
+      .then(() => MsgSuccess(action === 'test' ? '连接成功' : '保存成功'))
+      .finally(() => (loading.value = false))
+  })
+}
+onMounted(() => loadSetting())
+</script>
+
+<template>
+  <el-form
+    ref="authFormRef"
+    v-loading="loading"
+    class="max-w-200"
+    :model="form"
+    :rules="rules"
+    label-position="top"
+  >
+    <el-form-item label="LDAP 地址" prop="config.ldap_server"
+      ><el-input v-model="form.config.ldap_server" placeholder="请输入LDAP 地址"
+    /></el-form-item>
+    <el-form-item label="绑定 DN" prop="config.base_dn"
+      ><el-input v-model="form.config.base_dn" placeholder="请输入绑定 DN"
+    /></el-form-item>
+    <el-form-item label="密码" prop="config.password">
+      <el-input
+        v-model="form.config.password"
+        type="password"
+        show-password
+        placeholder="请输入密码"
+      />
+    </el-form-item>
+    <el-form-item label="用户 OU" prop="config.ou">
+      <el-input v-model="form.config.ou" placeholder="请输入用户 OU" />
+    </el-form-item>
+    <el-form-item label="用户过滤器" prop="config.ldap_filter"
+      ><el-input v-model="form.config.ldap_filter" placeholder="请输入用户过滤器"
+    /></el-form-item>
+    <el-form-item label="LDAP 属性映射" prop="config.ldap_mapping"
+      ><el-input
+        v-model="form.config.ldap_mapping"
+        type="textarea"
+        :rows="4"
+        placeholder="请输入 LDAP 属性映射"
+    /></el-form-item>
+    <el-form-item>
+      <div class="flex flex-col">
+        <span>启用 LDAP 认证</span>
+        <el-switch v-model="form.is_active" class="self-start" />
+      </div>
+    </el-form-item>
+    <div>
+      <el-button type="primary" @click="submit('save')">保存</el-button>
+      <el-button @click="submit('test')">测试连接</el-button>
+    </div>
+  </el-form>
+</template>
diff --git a/ui/src/views/system/chat/authentication/components/LoginSetting.vue b/ui/src/views/system/chat/authentication/components/LoginSetting.vue
new file mode 100644
index 00000000000..f62de530dda
--- /dev/null
+++ b/ui/src/views/system/chat/authentication/components/LoginSetting.vue
@@ -0,0 +1,274 @@
+<script setup lang="ts">
+import { computed, onMounted, reactive, ref, useTemplateRef } from 'vue'
+import type { FormInstance, FormRules } from 'element-plus'
+import CurrentUserApi from '@/api/admin/auth/current-user'
+import ChatUserAuthApi from '@/api/admin/system/chat-user-auth'
+import UserGroupsApi from '@/api/admin/system/user-groups'
+import type { ListItem, LoginAuthSetting, SystemUserGroup, LoginMethod } from '@/api/types'
+import { LOGIN_METHOD_LABELS } from '@/constants/auth'
+import { MsgSuccess } from '@/utils/message'
+import { useStore } from '@/stores'
+
+defineOptions({ name: 'AuthenticationSetting' })
+const { auth } = useStore()
+const authFormRef = useTemplateRef<FormInstance>('authFormRef')
+const loading = ref(false)
+const form = reactive<LoginAuthSetting>({
+  login_methods: ['LOCAL'],
+  default_value: 'LOCAL',
+  max_attempts: 1,
+  failed_attempts: 5,
+  lock_time: 10,
+  role_id: 'USER',
+  workspace_id: 'default',
+  permission: 'NOT_AUTH',
+})
+const rules: FormRules<LoginAuthSetting> = {
+  default_value: [{ required: true, message: '请选择默认登录方式', trigger: 'change' }],
+  login_methods: [{ required: true, message: '请选择登录方式', trigger: 'change' }],
+  role_id: [{ required: true, message: '请选择角色', trigger: 'change' }],
+  workspace_id: [{ required: true, message: '请选择工作空间', trigger: 'change' }],
+}
+
+/* 登录方式加载与提交 */
+const loginMethodOptions = computed(() => form.login_methods)
+const defaultLoginMethodOptions = computed(() => form.auth_types)
+function loadSetting() {
+  loading.value = true
+  return ChatUserAuthApi.getLoginSetting()
+    .then((setting) => {
+      Object.assign(form, setting)
+    })
+    .finally(() => {
+      loading.value = false
+    })
+}
+
+function handleLoginMethodsChange(loginMethods: string[]) {
+  if (!loginMethods.includes(form.default_value)) {
+    form.default_value = loginMethods[0] ?? ''
+  }
+}
+
+/* 登录次数不为0*/
+function normalizeNonZeroNumber(value: number | undefined) {
+  return value === undefined || value === 0 ? 1 : value
+}
+
+// 角色与工作空间选项
+const roleSettingOptionsLoading = ref(false)
+const roleOptions = ref<ListItem[]>([])
+const workspaceOptions = ref<ListItem[]>([])
+const selectedRoleType = computed(
+  () => roleOptions.value.find(({ id }) => id === form.role_id)?.type,
+)
+const showWorkspaceSelector = computed(() => selectedRoleType.value !== 'ADMIN')
+
+function loadRoleSettingOptions() {
+  roleSettingOptionsLoading.value = true
+  const roleSettingOptionRequests: Promise<void>[] = []
+
+  roleSettingOptionRequests.push(
+    CurrentUserApi.getCurrentUserRoleList().then((roles) => {
+      roleOptions.value = roles
+    }),
+  )
+  if (auth.isEE) {
+    roleSettingOptionRequests.push(
+      CurrentUserApi.getCurrentUserWorkspaceList().then((workspaces) => {
+        workspaceOptions.value = workspaces
+      }),
+    )
+  }
+
+  return Promise.all(roleSettingOptionRequests).finally(() => {
+    roleSettingOptionsLoading.value = false
+  })
+}
+
+function handleRoleChange() {
+  if (!showWorkspaceSelector.value) {
+    form.workspace_id = undefined
+    form.group_id = undefined
+    userGroups.value = []
+  }
+}
+
+function handleWorkspaceChange() {
+  form.group_id = undefined
+  loadUserGroups()
+}
+
+/* 选择用户组列表 */
+const loadingGroups = ref(false)
+const userGroups = ref<SystemUserGroup[]>([])
+
+function loadUserGroups() {
+  if (!form.workspace_id || !showWorkspaceSelector.value) {
+    userGroups.value = []
+    form.group_id = undefined
+    return Promise.resolve()
+  }
+
+  loadingGroups.value = true
+  return UserGroupsApi.getSystemUserGroups(form.workspace_id)
+    .then((groups) => {
+      userGroups.value = groups
+      if (!groups.some(({ id }) => id === form.group_id)) {
+        form.group_id = undefined
+      }
+    })
+    .finally(() => {
+      loadingGroups.value = false
+    })
+}
+
+function submit() {
+  authFormRef.value?.validate((valid) => {
+    if (!valid) return
+
+    loading.value = true
+    ChatUserAuthApi.putLoginSetting(form)
+      .then(() => MsgSuccess('保存成功'))
+      .finally(() => {
+        loading.value = false
+      })
+  })
+}
+
+onMounted(() => {
+  Promise.all([loadSetting(), loadRoleSettingOptions()]).then(() => {
+    return loadUserGroups()
+  })
+})
+</script>
+
+<template>
+  <el-form
+    v-loading="loading"
+    ref="authFormRef"
+    class="max-w-200"
+    :model="form"
+    :rules="rules"
+    label-position="top"
+    require-asterisk-position="right"
+  >
+    <el-form-item label="登录方式" prop="login_methods">
+      <el-checkbox-group v-model="form.login_methods" @change="handleLoginMethodsChange">
+        <el-checkbox
+          v-for="loginMethodOption in loginMethodOptions"
+          :key="loginMethodOption"
+          :value="loginMethodOption"
+          class="w-40"
+        >
+          {{ LOGIN_METHOD_LABELS[loginMethodOption as LoginMethod] }}
+        </el-checkbox>
+      </el-checkbox-group>
+    </el-form-item>
+
+    <el-form-item label="默认登录方式" prop="default_value">
+      <el-select v-model="form.default_value">
+        <el-option
+          v-for="loginMethodOption in defaultLoginMethodOptions"
+          :key="loginMethodOption.value"
+          :value="loginMethodOption.value"
+          :label="loginMethodOption.label"
+        />
+      </el-select>
+    </el-form-item>
+
+    <el-form-item label="账号登录验证码设置" required>
+      <el-card shadow="never" class="bg-N100! w-full">
+        <div class="flex items-center gap-2">
+          <span>登录失败</span>
+          <el-input-number
+            v-model="form.max_attempts"
+            :max="10"
+            :min="-1"
+            :step="1"
+            :value-on-clear="-1"
+            @change="form.max_attempts = normalizeNonZeroNumber($event)"
+          />
+          <span>登录失败</span>
+          <span class="text-N500">(值为-1时，不显示验证码)</span>
+        </div>
+        <div class="flex items-center gap-2 mt-4">
+          <span>登录失败</span>
+          <el-input-number
+            v-model="form.failed_attempts"
+            :max="10"
+            :min="-1"
+            :step="1"
+            :value-on-clear="-1"
+            @change="form.max_attempts = normalizeNonZeroNumber($event)"
+          />
+          <span>次，</span>
+          <span>锁定账号</span>
+          <el-input-number
+            v-model="form.lock_time"
+            :min="1"
+            :step="1"
+            :value-on-clear="1"
+            @change="form.max_attempts = normalizeNonZeroNumber($event)"
+          />
+          <span>分钟</span>
+        </div>
+      </el-card>
+    </el-form-item>
+    <p class="mb-2">第三方用户默认角色分配</p>
+    <el-card shadow="never" class="bg-N100!">
+      <el-form-item label="角色" prop="role_id">
+        <el-select
+          v-model="form.role_id"
+          :loading="roleSettingOptionsLoading"
+          filterable
+          clearable
+          placeholder="请选择角色"
+          @change="handleRoleChange"
+        >
+          <el-option
+            v-for="role in roleOptions"
+            :key="role.id"
+            :label="role.name"
+            :value="role.id"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="工作空间" prop="workspace_id" v-if="auth.isEE && showWorkspaceSelector">
+        <el-select
+          v-model="form.workspace_id"
+          :loading="roleSettingOptionsLoading"
+          filterable
+          clearable
+          placeholder="请选择工作空间"
+          @change="handleWorkspaceChange"
+        >
+          <el-option
+            v-for="workspace in workspaceOptions"
+            :key="workspace.id"
+            :label="workspace.name"
+            :value="workspace.id"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="用户组" v-if="form.workspace_id">
+        <el-select
+          filterable
+          clearable
+          v-model="form.group_id"
+          :loading="loadingGroups"
+          placeholder="请选择用户组"
+          class="w-240"
+        >
+          <el-option
+            v-for="userGroup in userGroups"
+            :key="userGroup.id"
+            :label="userGroup.name"
+            :value="userGroup.id"
+          />
+        </el-select>
+      </el-form-item>
+    </el-card>
+    <el-button class="mt-4" type="primary" @click="submit">保存</el-button>
+  </el-form>
+</template>
diff --git a/ui/src/views/system/chat/authentication/components/OAuth2.vue b/ui/src/views/system/chat/authentication/components/OAuth2.vue
new file mode 100644
index 00000000000..79fb094ec63
--- /dev/null
+++ b/ui/src/views/system/chat/authentication/components/OAuth2.vue
@@ -0,0 +1,111 @@
+<script setup lang="ts">
+import { onMounted, reactive, ref, useTemplateRef } from 'vue'
+import type { FormInstance, FormRules } from 'element-plus'
+import ChatUserAuthApi from '@/api/admin/system/chat-user-auth'
+import type { AuthProviderSetting } from '@/api/types'
+import { MsgSuccess } from '@/utils/message'
+
+defineOptions({ name: 'OidcAuthenticationSetting' })
+const defaultRedirectUrl = `${window.location.origin}${window.MaxKB?.prefix ?? ''}/api/oauth2`
+
+const authFormRef = useTemplateRef<FormInstance>('authFormRef')
+const loading = ref(false)
+const form = reactive<AuthProviderSetting>({
+  auth_type: 'OAuth2',
+  config: {
+    authEndpoint: '',
+    tokenEndpoint: '',
+    userInfoEndpoint: '',
+    scope: '',
+    clientId: '',
+    clientSecret: '',
+    redirectUrl: '',
+    fieldMapping: '',
+  },
+  is_active: false,
+})
+const rules = reactive<FormRules<AuthProviderSetting>>({
+  'config.authEndpoint': [{ required: true, message: '请输入授权端地址', trigger: 'blur' }],
+  'config.tokenEndpoint': [{ required: true, message: '请输入 Token 端地址', trigger: 'blur' }],
+  'config.userInfoEndpoint': [{ required: true, message: '请输入用户信息端地址', trigger: 'blur' }],
+  'config.scope': [{ required: true, message: '请输入连接范围', trigger: 'blur' }],
+  'config.clientId': [{ required: true, message: '请输入客户端 ID', trigger: 'blur' }],
+  'config.clientSecret': [{ required: true, message: '请输入客户端密钥', trigger: 'blur' }],
+  'config.fieldMapping': [{ required: true, message: '请输入字段映射', trigger: 'blur' }],
+  'config.redirectUrl': [{ required: true, message: '请输入回调地址', trigger: 'blur' }],
+})
+
+function loadSetting() {
+  loading.value = true
+
+  return ChatUserAuthApi.getAuthSetting(form.auth_type)
+    .then((setting) => {
+      const settingConfig = setting.config ?? {}
+      Object.assign(form, setting, {
+        config: {
+          ...form.config,
+          ...settingConfig,
+          redirectUrl: settingConfig.redirectUrl || defaultRedirectUrl,
+        },
+      })
+    })
+    .finally(() => {
+      loading.value = false
+    })
+}
+function submit() {
+  authFormRef.value?.validate((valid) => {
+    if (!valid) return
+    loading.value = true
+    ChatUserAuthApi.putAuthSetting(form.auth_type, form)
+      .then(() => MsgSuccess('保存成功'))
+      .finally(() => (loading.value = false))
+  })
+}
+onMounted(() => loadSetting())
+</script>
+
+<template>
+  <el-form
+    ref="authFormRef"
+    v-loading="loading"
+    class="max-w-200"
+    :model="form"
+    :rules="rules"
+    label-position="top"
+  >
+    <el-form-item label="授权端地址" prop="config.authEndpoint"
+      ><el-input v-model="form.config.authEndpoint" placeholder="请输入授权端地址"
+    /></el-form-item>
+    <el-form-item label="Token 端地址" prop="config.tokenEndpoint"
+      ><el-input v-model="form.config.tokenEndpoint" placeholder="请输入 Token 端地址"
+    /></el-form-item>
+    <el-form-item label="用户信息端地址" prop="config.userInfoEndpoint"
+      ><el-input v-model="form.config.userInfoEndpoint" placeholder="请输入用户信息端地址"
+    /></el-form-item>
+    <el-form-item label="连接范围" prop="config.scope"
+      ><el-input v-model="form.config.scope" placeholder="请输入连接范围"
+    /></el-form-item>
+    <el-form-item label="客户端 ID" prop="config.clientId"
+      ><el-input v-model="form.config.clientId" placeholder="请输入客户端 ID"
+    /></el-form-item>
+    <el-form-item label="客户端密钥" prop="config.clientSecret"
+      ><el-input
+        v-model="form.config.clientSecret"
+        type="password"
+        show-password
+        placeholder="请输入客户端密钥"
+    /></el-form-item>
+    <el-form-item label="字段映射" prop="config.fieldMapping"
+      ><el-input v-model="form.config.fieldMapping" placeholder="请输入字段映射"
+    /></el-form-item>
+    <el-form-item label="回调地址" prop="config.redirectUrl"
+      ><el-input v-model="form.config.redirectUrl" placeholder="请输入回调地址"
+    /></el-form-item>
+    <el-form-item
+      ><div class="flex flex-col">
+        <span>启用 OAuth2 认证</span><el-switch v-model="form.is_active" class="self-start" /></div
+    ></el-form-item>
+    <el-button type="primary" @click="submit">保存</el-button>
+  </el-form>
+</template>
diff --git a/ui/src/views/system/chat/authentication/components/OIDC.vue b/ui/src/views/system/chat/authentication/components/OIDC.vue
new file mode 100644
index 00000000000..7ad89b3c23b
--- /dev/null
+++ b/ui/src/views/system/chat/authentication/components/OIDC.vue
@@ -0,0 +1,117 @@
+<script setup lang="ts">
+import { onMounted, reactive, ref, useTemplateRef } from 'vue'
+import type { FormInstance, FormRules } from 'element-plus'
+import ChatUserAuthApi from '@/api/admin/system/chat-user-auth'
+import type { AuthProviderSetting } from '@/api/types'
+import { MsgSuccess } from '@/utils/message'
+
+defineOptions({ name: 'OidcAuthenticationSetting' })
+const defaultFieldMapping = '{"username":"preferred_username","email":"email"}'
+const defaultRedirectUrl = `${window.location.origin}${window.MaxKB?.prefix ?? ''}/api/oidc`
+
+const authFormRef = useTemplateRef<FormInstance>('authFormRef')
+const loading = ref(false)
+const form = reactive<AuthProviderSetting>({
+  auth_type: 'OIDC',
+  config: {
+    authEndpoint: '',
+    tokenEndpoint: '',
+    userInfoEndpoint: '',
+    scope: '',
+    state: '',
+    clientId: '',
+    clientSecret: '',
+    fieldMapping: defaultFieldMapping,
+    redirectUrl: defaultRedirectUrl,
+  },
+  is_active: false,
+})
+const rules = reactive<FormRules<AuthProviderSetting>>({
+  'config.authEndpoint': [{ required: true, message: '请输入授权端地址', trigger: 'blur' }],
+  'config.tokenEndpoint': [{ required: true, message: '请输入 Token 端地址', trigger: 'blur' }],
+  'config.userInfoEndpoint': [{ required: true, message: '请输入用户信息端地址', trigger: 'blur' }],
+  'config.scope': [{ required: true, message: '请输入 Scope', trigger: 'blur' }],
+  'config.clientId': [{ required: true, message: '请输入客户端 ID', trigger: 'blur' }],
+  'config.clientSecret': [{ required: true, message: '请输入客户端密钥', trigger: 'blur' }],
+  'config.fieldMapping': [{ required: true, message: '请输入字段映射', trigger: 'blur' }],
+  'config.redirectUrl': [{ required: true, message: '请输入回调地址', trigger: 'blur' }],
+})
+
+function loadSetting() {
+  loading.value = true
+
+  return ChatUserAuthApi.getAuthSetting(form.auth_type)
+    .then((setting) => {
+      const settingConfig = setting.config ?? {}
+      Object.assign(form, setting, {
+        config: {
+          ...form.config,
+          ...settingConfig,
+          fieldMapping: settingConfig.fieldMapping || defaultFieldMapping,
+          redirectUrl: settingConfig.redirectUrl || defaultRedirectUrl,
+        },
+      })
+    })
+    .finally(() => {
+      loading.value = false
+    })
+}
+function submit() {
+  authFormRef.value?.validate((valid) => {
+    if (!valid) return
+    loading.value = true
+    ChatUserAuthApi.putAuthSetting(form.auth_type, form)
+      .then(() => MsgSuccess('保存成功'))
+      .finally(() => (loading.value = false))
+  })
+}
+onMounted(() => loadSetting())
+</script>
+
+<template>
+  <el-form
+    ref="authFormRef"
+    v-loading="loading"
+    class="max-w-200"
+    :model="form"
+    :rules="rules"
+    label-position="top"
+  >
+    <el-form-item label="授权端地址" prop="config.authEndpoint"
+      ><el-input v-model="form.config.authEndpoint" placeholder="请输入授权端地址"
+    /></el-form-item>
+    <el-form-item label="Token 端地址" prop="config.tokenEndpoint"
+      ><el-input v-model="form.config.tokenEndpoint" placeholder="请输入 Token 端地址"
+    /></el-form-item>
+    <el-form-item label="用户信息端地址" prop="config.userInfoEndpoint"
+      ><el-input v-model="form.config.userInfoEndpoint" placeholder="请输入用户信息端地址"
+    /></el-form-item>
+    <el-form-item label="Scope" prop="config.scope"
+      ><el-input v-model="form.config.scope" placeholder="openid+profile+email"
+    /></el-form-item>
+    <el-form-item label="State"
+      ><el-input v-model="form.config.state" placeholder="请输入"
+    /></el-form-item>
+    <el-form-item label="客户端 ID" prop="config.clientId"
+      ><el-input v-model="form.config.clientId" placeholder="请输入客户端 ID"
+    /></el-form-item>
+    <el-form-item label="客户端密钥" prop="config.clientSecret"
+      ><el-input
+        v-model="form.config.clientSecret"
+        type="password"
+        show-password
+        placeholder="请输入客户端密钥"
+    /></el-form-item>
+    <el-form-item label="字段映射" prop="config.fieldMapping"
+      ><el-input v-model="form.config.fieldMapping" placeholder="请输入字段映射"
+    /></el-form-item>
+    <el-form-item label="回调地址" prop="config.redirectUrl"
+      ><el-input v-model="form.config.redirectUrl" placeholder="请输入回调地址"
+    /></el-form-item>
+    <el-form-item
+      ><div class="flex flex-col">
+        <span>启用 OIDC 认证</span><el-switch v-model="form.is_active" class="self-start" /></div
+    ></el-form-item>
+    <el-button type="primary" @click="submit">保存</el-button>
+  </el-form>
+</template>
diff --git a/ui/src/views/system/chat/authentication/components/SCANLogin.vue b/ui/src/views/system/chat/authentication/components/SCANLogin.vue
new file mode 100644
index 00000000000..a0c39f47187
--- /dev/null
+++ b/ui/src/views/system/chat/authentication/components/SCANLogin.vue
@@ -0,0 +1,146 @@
+<script setup lang="ts">
+import { onMounted, ref, useTemplateRef } from 'vue'
+import ChatUserAuthScanApi from '@/api/admin/system/chat-user-auth-scan'
+import type { QrCodeProvider, QrLoginPlatform, QrLoginPlatformRequest } from '@/api/types'
+import { LOGIN_METHOD_LABELS, SCAN_FIELD_LABELS } from '@/constants/auth'
+import { MsgSuccess, MsgError } from '@/utils/message'
+import dingtalkLogo from '@/assets/logo/logo_dingtalk.svg'
+import enterpriseWechatLogo from '@/assets/logo/logo_enterprise-wechat.svg'
+import larkLogo from '@/assets/logo/logo_lark.svg'
+import EditSCANDrawer from '../EditSCANDrawer.vue'
+
+interface QrLoginPlatformView extends QrLoginPlatformRequest {
+  isValid: boolean
+  logo: string
+}
+
+const platformDefinitions: {
+  configKeys: string[]
+  key: QrCodeProvider
+  logo: string
+}[] = [
+  {
+    key: 'wecom',
+    logo: enterpriseWechatLogo,
+    configKeys: ['corp_id', 'agent_id', 'app_secret'],
+  },
+  {
+    key: 'dingtalk',
+    logo: dingtalkLogo,
+    configKeys: ['corp_id', 'app_key', 'app_secret'],
+  },
+  { key: 'lark', logo: larkLogo, configKeys: ['app_key', 'app_secret'] },
+]
+
+const apiBaseUrl = `${window.location.origin}${window.MaxKB?.prefix ?? ''}/api`
+
+const loading = ref(false)
+const qrLoginPlatforms = ref<QrLoginPlatformView[]>([])
+
+function createQrLoginPlatforms(settings: QrLoginPlatform[]): QrLoginPlatformView[] {
+  return platformDefinitions.map(({ configKeys, key, logo }) => {
+    const setting = settings.find(({ auth_type }) => auth_type === key)
+
+    return {
+      key,
+      logo,
+      config: Object.fromEntries([
+        ...configKeys.map((configKey) => [configKey, setting?.config[configKey] ?? '']),
+        ['callback_url', setting?.config.callback_url || `${apiBaseUrl}/${key}`],
+      ]),
+      isActive: setting?.is_active ?? false,
+      isValid: setting?.is_valid ?? false,
+    }
+  })
+}
+
+/* 扫码登录平台加载与状态切换 */
+function loadQrPlatforms() {
+  loading.value = true
+  return ChatUserAuthScanApi.getQrLoginPlatforms()
+    .then((settings) => {
+      qrLoginPlatforms.value = createQrLoginPlatforms(settings)
+    })
+    .finally(() => {
+      loading.value = false
+    })
+}
+
+/* 改变状态 */
+function handlePlatformStatusChange(platform: QrLoginPlatformView) {
+  loading.value = true
+  return ChatUserAuthScanApi.postQrLoginPlatform({
+    key: platform.key,
+    config: platform.config,
+    isActive: platform.isActive,
+  })
+    .then(() => MsgSuccess('保存成功'))
+    .catch((error) => {
+      platform.isActive = !platform.isActive
+      throw error
+    })
+    .finally(() => {
+      loading.value = false
+    })
+}
+
+/* 编辑 */
+const editScanDrawerRef = useTemplateRef<InstanceType<typeof EditSCANDrawer>>('editScanDrawerRef')
+
+function handleEditPlatform(platform: QrLoginPlatformView) {
+  editScanDrawerRef.value?.open(platform)
+}
+
+/* 校验 */
+function handleValidatePlatform(platform: QrLoginPlatformView) {
+  loading.value = true
+  return ChatUserAuthScanApi.putValidateQrLoginPlatform(platform)
+    .then((res) => {
+      // TODO: 校验判断有误
+      res ? MsgSuccess('校验成功') : MsgError('校验失败')
+    })
+    .finally(() => {
+      loading.value = false
+    })
+}
+
+onMounted(loadQrPlatforms)
+</script>
+
+<template>
+  <div class="pr-2 flex flex-col gap-4">
+    <template v-for="platform in qrLoginPlatforms" :key="platform.key">
+      <el-card shadow="hover">
+        <div class="flex-between mb-4">
+          <div class="flex items-center gap-2">
+            <img :src="platform.logo" :alt="LOGIN_METHOD_LABELS[platform.key]" class="h-6 w-6" />
+            <h4>{{ LOGIN_METHOD_LABELS[platform.key] }}</h4>
+            <el-tag v-if="platform.isValid" size="small" type="success">有效</el-tag>
+            <!-- <el-tag v-if="!platform.isValid" size="small" type="danger">无效</el-tag> -->
+          </div>
+
+          <div v-if="platform.isValid" class="flex items-center gap-2">
+            <span>{{ platform.isActive ? '已启用' : '已关闭' }}</span>
+            <el-switch v-model="platform.isActive" @change="handlePlatformStatusChange(platform)" />
+          </div>
+          <el-button v-else type="primary" @click="handleEditPlatform(platform)">接入</el-button>
+        </div>
+        <div class="border-t" v-if="platform.isValid">
+          <div class="py-4 grid grid-cols-2 gap-x-6 gap-y-4">
+            <div v-for="(value, key) in platform.config" :key="key">
+              <p class="text-N600">{{ SCAN_FIELD_LABELS[key] ?? key }}</p>
+              <p>
+                {{ key === 'app_secret' ? '••••••••••••' : value }}
+              </p>
+            </div>
+          </div>
+
+          <el-button type="primary" @click="handleEditPlatform(platform)">编辑</el-button>
+          <el-button @click="handleValidatePlatform(platform)">校验</el-button>
+        </div>
+      </el-card>
+    </template>
+  </div>
+
+  <EditSCANDrawer ref="editScanDrawerRef" @refresh="loadQrPlatforms" />
+</template>
diff --git a/ui/src/views/system/chat/authentication/components/Saml2.vue b/ui/src/views/system/chat/authentication/components/Saml2.vue
new file mode 100644
index 00000000000..067be40ec54
--- /dev/null
+++ b/ui/src/views/system/chat/authentication/components/Saml2.vue
@@ -0,0 +1,123 @@
+<script setup lang="ts">
+import { onMounted, reactive, ref, useTemplateRef } from 'vue'
+import type { FormInstance, FormRules } from 'element-plus'
+import ChatUserAuthApi from '@/api/admin/system/chat-user-auth'
+import type { AuthProviderSetting } from '@/api/types'
+import { MsgSuccess } from '@/utils/message'
+
+defineOptions({ name: 'SamlAuthenticationSetting' })
+const samlApiBaseUrl = `${window.location.origin}${window.MaxKB?.prefix ?? ''}/api/saml2`
+const authFormRef = useTemplateRef<FormInstance>('authFormRef')
+const loading = ref(false)
+const form = reactive<AuthProviderSetting>({
+  auth_type: 'SAML2',
+  config: {
+    idpMetaUrl: '',
+    wantAssertionsSigned: true,
+    wantAuthnRequestsSigned: true,
+    privateKey: '',
+    certificate: '',
+    mapping: '',
+    spEntityId: `${samlApiBaseUrl}/metadata`,
+    spAcs: `${samlApiBaseUrl}/sso`,
+  },
+  is_active: false,
+})
+const rules = reactive<FormRules<AuthProviderSetting>>({
+  'config.idpMetaUrl': [{ required: true, message: '请输入 Idp MetaData Url', trigger: 'blur' }],
+  'config.privateKey': [{ required: true, message: '请输入 SP Private Key', trigger: 'blur' }],
+  'config.certificate': [{ required: true, message: '请输入 SP Certificate', trigger: 'blur' }],
+  'config.mapping': [{ required: true, message: '请输入字段映射', trigger: 'blur' }],
+  'config.spEntityId': [{ required: true, message: '请输入 SP Entity Id', trigger: 'blur' }],
+  'config.spAcs': [{ required: true, message: '请输入 SP Ace', trigger: 'blur' }],
+})
+
+function loadSetting() {
+  loading.value = true
+
+  return ChatUserAuthApi.getAuthSetting(form.auth_type)
+    .then((setting) => {
+      const settingConfig = setting.config ?? {}
+      const mapping = settingConfig.mapping
+
+      Object.assign(form, setting, {
+        config: {
+          ...form.config,
+          ...settingConfig,
+          mapping:
+            typeof mapping === 'string' && mapping
+              ? JSON.stringify(JSON.parse(mapping))
+              : mapping || '',
+          spEntityId: settingConfig.spEntityId || `${samlApiBaseUrl}/metadata`,
+          spAcs: settingConfig.spAcs || `${samlApiBaseUrl}/sso`,
+        },
+      })
+    })
+    .finally(() => {
+      loading.value = false
+    })
+}
+function submit() {
+  authFormRef.value?.validate((valid) => {
+    if (!valid) return
+    loading.value = true
+    ChatUserAuthApi.putAuthSetting(form.auth_type, form)
+      .then(() => MsgSuccess('保存成功'))
+      .finally(() => (loading.value = false))
+  })
+}
+onMounted(() => loadSetting())
+</script>
+
+<template>
+  <el-form
+    ref="authFormRef"
+    v-loading="loading"
+    class="max-w-200"
+    :model="form"
+    :rules="rules"
+    label-position="top"
+  >
+    <el-form-item label="Idp MetaData Url" prop="config.idpMetaUrl"
+      ><el-input v-model="form.config.idpMetaUrl" placeholder="请输入 Idp MetaData Url"
+    /></el-form-item>
+    <el-form-item
+      ><div class="flex flex-col">
+        <span>开启请求签名</span
+        ><el-switch v-model="form.config.wantAssertionsSigned" class="self-start" /></div
+    ></el-form-item>
+    <el-form-item
+      ><div class="flex flex-col">
+        <span>开启断言签名</span
+        ><el-switch v-model="form.config.wantAuthnRequestsSigned" class="self-start" /></div
+    ></el-form-item>
+    <el-form-item label="SP Private Key" prop="config.privateKey"
+      ><el-input
+        v-model="form.config.privateKey"
+        placeholder="请输入 SP Private Key"
+        type="password"
+        show-password
+    /></el-form-item>
+    <el-form-item label="SP Certificate" prop="config.certificate"
+      ><el-input
+        v-model="form.config.certificate"
+        placeholder="请输入 SP Certificate"
+        type="password"
+        show-password
+    /></el-form-item>
+    <el-form-item label="字段映射" prop="config.mapping"
+      ><el-input v-model="form.config.mapping" placeholder="请输入字段映射"
+    /></el-form-item>
+    <el-form-item label="SP Entity ID" prop="config.spEntityId"
+      ><el-input v-model="form.config.spEntityId" placeholder="请输入 SP Entity ID"
+    /></el-form-item>
+    <el-form-item label="SP ACS" prop="config.spAcs"
+      ><el-input v-model="form.config.spAcs" placeholder="请输入 SP ACS"
+    /></el-form-item>
+    <el-form-item
+      ><div class="flex flex-col">
+        <span>启用 SAML2 认证</span><el-switch v-model="form.is_active" class="self-start" /></div
+    ></el-form-item>
+    <el-button type="primary" @click="submit">保存</el-button>
+  </el-form>
+</template>
diff --git a/ui/src/views/system/settings/authentication/AuthenticationView.vue b/ui/src/views/system/settings/authentication/AuthenticationView.vue
new file mode 100644
index 00000000000..de7f6789136
--- /dev/null
+++ b/ui/src/views/system/settings/authentication/AuthenticationView.vue
@@ -0,0 +1,61 @@
+<script setup lang="ts">
+import { ref, type Component } from 'vue'
+import LDAP from './components/LDAP.vue'
+import CAS from './components/CAS.vue'
+import OIDC from './components/OIDC.vue'
+import SCAN from './components/SCANLogin.vue'
+import OAuth2 from './components/OAuth2.vue'
+import Saml2 from './components/Saml2.vue'
+import LoginSetting from './components/LoginSetting.vue'
+
+interface AuthenticationTab {
+  component: Component
+  label: string
+  name: string
+}
+
+const activeName = ref('SCAN')
+const authenticationTabs: AuthenticationTab[] = [
+  { label: '登录设置', name: 'LoginSetting', component: LoginSetting },
+  { label: 'LDAP', name: 'LDAP', component: LDAP },
+  { label: 'CAS', name: 'CAS', component: CAS },
+  { label: 'OIDC', name: 'OIDC', component: OIDC },
+  { label: 'OAuth2', name: 'OAuth2', component: OAuth2 },
+  { label: 'SAML2', name: 'SAML2', component: Saml2 },
+  { label: '扫码登录', name: 'SCAN', component: SCAN },
+]
+</script>
+
+<template>
+  <MkViewLayout class="system-settings-authentication">
+    <el-tabs v-model="activeName" class="authentication-tabs min-h-0 flex-1 flex-col">
+      <template v-for="authenticationTab in authenticationTabs" :key="authenticationTab.name">
+        <el-tab-pane
+          class="h-full"
+          :label="authenticationTab.label"
+          :name="authenticationTab.name"
+          lazy
+        >
+          <el-scrollbar>
+            <div class="py-4">
+              <component :is="authenticationTab.component" />
+            </div>
+          </el-scrollbar>
+        </el-tab-pane>
+      </template>
+    </el-tabs>
+  </MkViewLayout>
+</template>
+
+<style scoped lang="scss">
+.authentication-tabs {
+  :deep(.el-tabs__header) {
+    flex-shrink: 0;
+  }
+
+  :deep(.el-tabs__content) {
+    min-height: 0;
+    flex: 1;
+  }
+}
+</style>
diff --git a/ui/src/views/system/settings/authentication/EditSCANDrawer.vue b/ui/src/views/system/settings/authentication/EditSCANDrawer.vue
new file mode 100644
index 00000000000..fb517447768
--- /dev/null
+++ b/ui/src/views/system/settings/authentication/EditSCANDrawer.vue
@@ -0,0 +1,105 @@
+<script setup lang="ts">
+import { computed, reactive, ref, useTemplateRef } from 'vue'
+import type { FormInstance, FormRules } from 'element-plus'
+import AuthScanApi from '@/api/admin/system/auth-scan-setting'
+import type { QrLoginPlatformRequest } from '@/api/types'
+import { LOGIN_METHOD_LABELS, SCAN_FIELD_LABELS } from '@/constants/auth'
+import { MsgSuccess, MsgError } from '@/utils/message'
+
+const emit = defineEmits<{ refresh: [] }>()
+const visible = ref(false)
+const loading = ref(false)
+const formRef = useTemplateRef<FormInstance>('formRef')
+const form = reactive<QrLoginPlatformRequest>({
+  key: 'wecom',
+  isActive: false,
+  config: {},
+})
+
+const rules = computed<FormRules>(() =>
+  Object.fromEntries(
+    Object.keys(form.config).map((key) => [
+      `config.${key}`,
+      [{ required: true, message: `请输入${SCAN_FIELD_LABELS[key] ?? key}`, trigger: 'blur' }],
+    ]),
+  ),
+)
+function submit() {
+  formRef.value?.validate((valid) => {
+    if (!valid) return
+
+    loading.value = true
+    AuthScanApi.putQrLoginPlatform(form)
+      .then(() => {
+        MsgSuccess('保存成功')
+        emit('refresh')
+        close()
+      })
+      .finally(() => {
+        loading.value = false
+      })
+  })
+}
+
+/* 校验 */
+function handleValidatePlatform() {
+  loading.value = true
+  return AuthScanApi.postValidateQrLoginPlatform(form)
+    .then((res) => {
+      // TODO: 校验判断有误
+      res ? MsgSuccess('校验成功') : MsgError('校验失败')
+    })
+    .finally(() => {
+      loading.value = false
+    })
+}
+
+function open(platform: QrLoginPlatformRequest) {
+  Object.assign(form, platform, { config: { ...platform.config } })
+  visible.value = true
+}
+
+function close() {
+  visible.value = false
+  resetData()
+}
+
+function resetData() {
+  Object.assign(form, { key: 'wecom', isActive: false, config: {} })
+  formRef.value?.resetFields()
+}
+defineExpose({ open })
+</script>
+
+<template>
+  <MkDrawer v-model="visible" :title="`${LOGIN_METHOD_LABELS[form.key]}设置`" @closed="resetData">
+    <el-form
+      ref="formRef"
+      v-loading="loading"
+      :model="form"
+      :rules="rules"
+      label-position="top"
+      require-asterisk-position="right"
+    >
+      <el-form-item
+        v-for="(_, key) in form.config"
+        :key="key"
+        :label="SCAN_FIELD_LABELS[key] ?? key"
+        :prop="`config.${key}`"
+      >
+        <el-input
+          v-model="form.config[key]"
+          :show-password="key === 'app_secret'"
+          :type="key === 'app_secret' ? 'password' : 'text'"
+          placeholder="请输入"
+        />
+      </el-form-item>
+    </el-form>
+
+    <template #footer>
+      <el-button @click="close">取消</el-button>
+      <el-button @click="handleValidatePlatform">校验</el-button>
+      <el-button type="primary" @click="submit">保存</el-button>
+    </template>
+  </MkDrawer>
+</template>
diff --git a/ui/src/views/system/settings/authentication/components/AuthProviderForm.vue b/ui/src/views/system/settings/authentication/components/AuthProviderForm.vue
deleted file mode 100644
index e65e60ab2dd..00000000000
--- a/ui/src/views/system/settings/authentication/components/AuthProviderForm.vue
+++ /dev/null
@@ -1,130 +0,0 @@
-<script setup lang="ts">
-import { computed, onMounted, reactive, ref, useTemplateRef } from 'vue'
-import type { FormInstance, FormRules } from 'element-plus'
-import AuthSettingApi from '@/api/admin/system/auth-setting'
-import type { AuthProviderSetting, AuthProviderType } from '@/api/types'
-import { MsgSuccess } from '@/utils/message'
-
-export interface AuthProviderField {
-  defaultValue?: string | boolean
-  key: string
-  label: string
-  placeholder?: string
-  required?: boolean
-  rows?: number
-  type?: 'password' | 'textarea' | 'switch'
-}
-
-const props = withDefaults(
-  defineProps<{
-    authType: AuthProviderType
-    fields: AuthProviderField[]
-    testable?: boolean
-  }>(),
-  { testable: false },
-)
-
-const authFormRef = useTemplateRef<FormInstance>('authFormRef')
-const loading = ref(false)
-const form = reactive<AuthProviderSetting>(createDefaultSetting())
-const rules = computed<FormRules>(() =>
-  Object.fromEntries(
-    props.fields
-      .filter(({ required = true, type }) => required && type !== 'switch')
-      .map(({ key, label }) => [
-        `config.${key}`,
-        [{ required: true, message: `请输入${label}`, trigger: 'blur' }],
-      ]),
-  ),
-)
-
-function createDefaultSetting(): AuthProviderSetting {
-  return {
-    auth_type: props.authType,
-    config: Object.fromEntries(
-      props.fields.map(({ defaultValue = '', key }) => [key, defaultValue]),
-    ),
-    is_active: false,
-  }
-}
-
-/* 认证源配置加载与提交 */
-function loadSetting() {
-  loading.value = true
-  return AuthSettingApi.getAuthSetting(props.authType)
-    .then((setting) => {
-      const defaultSetting = createDefaultSetting()
-      Object.assign(form, defaultSetting, setting, {
-        config: { ...defaultSetting.config, ...setting.config },
-      })
-    })
-    .finally(() => {
-      loading.value = false
-    })
-}
-
-function submit(action: 'save' | 'test') {
-  authFormRef.value?.validate((valid) => {
-    if (!valid) return
-
-    loading.value = true
-    const request =
-      action === 'test'
-        ? AuthSettingApi.postAuthSettingConnection(form)
-        : AuthSettingApi.putAuthSetting(props.authType, form)
-
-    request
-      .then(() => MsgSuccess(action === 'test' ? '连接成功' : '保存成功'))
-      .finally(() => {
-        loading.value = false
-      })
-  })
-}
-
-onMounted(loadSetting)
-</script>
-
-<template>
-  <div v-loading="loading" class="flex h-full min-h-0 flex-col">
-    <el-scrollbar class="min-h-0 flex-1">
-      <el-form
-        ref="authFormRef"
-        class="max-w-200 px-6 pb-6 pt-4"
-        :model="form"
-        :rules="rules"
-        label-position="top"
-        require-asterisk-position="right"
-      >
-        <template v-for="field in fields" :key="field.key">
-          <el-form-item v-if="field.type === 'switch'">
-            <div class="flex flex-col">
-              <span>{{ field.label }}</span>
-              <el-switch v-model="form.config[field.key]" class="self-start" />
-            </div>
-          </el-form-item>
-          <el-form-item v-else :label="field.label" :prop="`config.${field.key}`">
-            <el-input
-              v-model="form.config[field.key]"
-              :placeholder="field.placeholder || `请输入${field.label}`"
-              :rows="field.rows ?? (field.type === 'textarea' ? 4 : undefined)"
-              :show-password="field.type === 'password'"
-              :type="field.type ?? 'text'"
-            />
-          </el-form-item>
-        </template>
-
-        <el-form-item>
-          <div class="flex flex-col">
-            <span>启用认证</span>
-            <el-switch v-model="form.is_active" class="self-start" />
-          </div>
-        </el-form-item>
-
-        <div class="flex gap-3">
-          <el-button type="primary" @click="submit('save')">保存</el-button>
-          <el-button v-if="testable" @click="submit('test')">测试连接</el-button>
-        </div>
-      </el-form>
-    </el-scrollbar>
-  </div>
-</template>
diff --git a/ui/src/views/system/settings/authentication/components/CAS.vue b/ui/src/views/system/settings/authentication/components/CAS.vue
index 09b591b8e8d..581c5c422af 100644
--- a/ui/src/views/system/settings/authentication/components/CAS.vue
+++ b/ui/src/views/system/settings/authentication/components/CAS.vue
@@ -1,14 +1,85 @@
 <script setup lang="ts">
-import AuthProviderForm, { type AuthProviderField } from './AuthProviderForm.vue'
-
-const callbackUrl = `${window.location.origin}${window.MaxKB?.prefix ?? ''}/api/cas`
-const fields: AuthProviderField[] = [
-  { key: 'ldpUri', label: 'CAS 服务地址' },
-  { key: 'validateUrl', label: '校验地址' },
-  { key: 'redirectUrl', label: '回调地址', defaultValue: callbackUrl },
-]
+import { onMounted, reactive, ref, useTemplateRef } from 'vue'
+import type { FormInstance, FormRules } from 'element-plus'
+import AuthSettingApi from '@/api/admin/system/auth-setting'
+import type { AuthProviderSetting } from '@/api/types'
+import { MsgSuccess } from '@/utils/message'
+
+defineOptions({ name: 'CasAuthenticationSetting' })
+
+const defaultRedirectUrl = `${window.location.origin}${window.MaxKB?.prefix ?? ''}/api/cas`
+const authFormRef = useTemplateRef<FormInstance>('authFormRef')
+const loading = ref(false)
+const form = reactive<AuthProviderSetting>({
+  auth_type: 'CAS',
+  config: { ldpUri: '', validateUrl: '', redirectUrl: defaultRedirectUrl },
+  is_active: false,
+})
+const rules = reactive<FormRules<AuthProviderSetting>>({
+  'config.ldpUri': [{ required: true, message: '请输入 ldpUri', trigger: 'blur' }],
+  'config.validateUrl': [{ required: true, message: '请输入验证地址', trigger: 'blur' }],
+  'config.redirectUrl': [{ required: true, message: '请输入回调地址', trigger: 'blur' }],
+})
+
+function loadSetting() {
+  loading.value = true
+
+  return AuthSettingApi.getAuthSetting(form.auth_type)
+    .then((setting) => {
+      const settingConfig = setting.config ?? {}
+      const ldpUri = settingConfig.ldpUri ?? ''
+
+      Object.assign(form, setting, {
+        config: {
+          ...form.config,
+          ...settingConfig,
+          validateUrl: settingConfig.validateUrl || ldpUri,
+          redirectUrl: settingConfig.redirectUrl || defaultRedirectUrl,
+        },
+      })
+    })
+    .finally(() => {
+      loading.value = false
+    })
+}
+
+function submit() {
+  authFormRef.value?.validate((valid) => {
+    if (!valid) return
+    loading.value = true
+    AuthSettingApi.putAuthSetting(form.auth_type, form)
+      .then(() => MsgSuccess('保存成功'))
+      .finally(() => (loading.value = false))
+  })
+}
+
+onMounted(() => loadSetting)
 </script>
 
 <template>
-  <AuthProviderForm auth-type="CAS" :fields="fields" />
+  <el-form
+    ref="authFormRef"
+    v-loading="loading"
+    class="max-w-200"
+    :model="form"
+    :rules="rules"
+    label-position="top"
+  >
+    <el-form-item label="ldpUri" prop="config.ldpUri"
+      ><el-input v-model="form.config.ldpUri" placeholder="请输入 ldpUri"
+    /></el-form-item>
+    <el-form-item label="验证地址" prop="config.validateUrl"
+      ><el-input v-model="form.config.validateUrl" placeholder="请输入验证地址"
+    /></el-form-item>
+    <el-form-item label="回调地址" prop="config.redirectUrl"
+      ><el-input v-model="form.config.redirectUrl" placeholder="请输入回调地址"
+    /></el-form-item>
+    <el-form-item
+      ><div class="flex flex-col">
+        <span>启用 CAS 认证</span>
+        <el-switch v-model="form.is_active" class="self-start" />
+      </div>
+    </el-form-item>
+    <el-button type="primary" @click="submit">保存</el-button>
+  </el-form>
 </template>
diff --git a/ui/src/views/system/settings/authentication/components/EditModal.vue b/ui/src/views/system/settings/authentication/components/EditModal.vue
deleted file mode 100644
index 1e29ed2633d..00000000000
--- a/ui/src/views/system/settings/authentication/components/EditModal.vue
+++ /dev/null
@@ -1,115 +0,0 @@
-<script setup lang="ts">
-import { computed, reactive, ref, useTemplateRef } from 'vue'
-import type { FormInstance, FormRules } from 'element-plus'
-import PlatformSourceApi from '@/api/admin/system/platform-source'
-import type { QrLoginPlatformRequest, QrLoginPlatformType } from '@/api/types'
-import { MsgSuccess } from '@/utils/message'
-
-interface QrLoginPlatformEditorData extends QrLoginPlatformRequest {
-  name: string
-}
-
-const emit = defineEmits<{ saved: [] }>()
-const visible = ref(false)
-const loading = ref(false)
-const formRef = useTemplateRef<FormInstance>('formRef')
-const form = reactive<QrLoginPlatformEditorData>({
-  key: 'wecom',
-  name: '',
-  isActive: false,
-  config: {},
-})
-const fieldLabels: Record<string, string> = {
-  agent_id: 'Agent ID',
-  app_key: 'App Key',
-  app_secret: 'App Secret',
-  callback_url: '回调地址',
-  corp_id: 'Corp ID',
-}
-const rules = computed<FormRules>(() =>
-  Object.fromEntries(
-    Object.keys(form.config).map((key) => [
-      `config.${key}`,
-      [{ required: true, message: `请输入${fieldLabels[key] ?? key}`, trigger: 'blur' }],
-    ]),
-  ),
-)
-
-function resetData() {
-  Object.assign(form, { key: 'wecom', name: '', isActive: false, config: {} })
-  formRef.value?.resetFields()
-}
-
-function open(platform: QrLoginPlatformEditorData) {
-  resetData()
-  Object.assign(form, platform, { config: { ...platform.config } })
-  visible.value = true
-}
-
-function close() {
-  visible.value = false
-  resetData()
-}
-
-function createRequest(): QrLoginPlatformRequest {
-  return { key: form.key as QrLoginPlatformType, isActive: form.isActive, config: form.config }
-}
-
-function submit(action: 'save' | 'test') {
-  formRef.value?.validate((valid) => {
-    if (!valid) return
-
-    loading.value = true
-    const request =
-      action === 'test'
-        ? PlatformSourceApi.postQrLoginPlatformConnection(createRequest())
-        : PlatformSourceApi.putQrLoginPlatform(createRequest())
-
-    request
-      .then(() => {
-        MsgSuccess(action === 'test' ? '验证成功' : '保存成功')
-        if (action === 'save') {
-          emit('saved')
-          close()
-        }
-      })
-      .finally(() => {
-        loading.value = false
-      })
-  })
-}
-
-defineExpose({ open })
-</script>
-
-<template>
-  <MkDrawer v-model="visible" :title="`${form.name}设置`" size="560" @closed="resetData">
-    <el-form
-      ref="formRef"
-      v-loading="loading"
-      :model="form"
-      :rules="rules"
-      label-position="top"
-      require-asterisk-position="right"
-    >
-      <el-form-item
-        v-for="(_, key) in form.config"
-        :key="key"
-        :label="fieldLabels[key] ?? key"
-        :prop="`config.${key}`"
-      >
-        <el-input
-          v-model="form.config[key]"
-          :show-password="key === 'app_secret'"
-          :type="key === 'app_secret' ? 'password' : 'text'"
-        />
-      </el-form-item>
-    </el-form>
-
-    <template #footer>
-      <el-button @click="close">取消</el-button>
-      <el-button @click="submit('test')">验证</el-button>
-      <el-button type="primary" @click="submit('save')">保存</el-button>
-    </template>
-  </MkDrawer>
-</template>
diff --git a/ui/src/views/system/settings/authentication/components/LDAP.vue b/ui/src/views/system/settings/authentication/components/LDAP.vue
index 00287244405..ec9f47deb1f 100644
--- a/ui/src/views/system/settings/authentication/components/LDAP.vue
+++ b/ui/src/views/system/settings/authentication/components/LDAP.vue
@@ -1,21 +1,106 @@
 <script setup lang="ts">
-import AuthProviderForm, { type AuthProviderField } from './AuthProviderForm.vue'
+import { onMounted, reactive, ref, useTemplateRef } from 'vue'
+import type { FormInstance, FormRules } from 'element-plus'
+import AuthSettingApi from '@/api/admin/system/auth-setting'
+import type { AuthProviderSetting } from '@/api/types'
+import { MsgSuccess } from '@/utils/message'
 
-const fields: AuthProviderField[] = [
-  { key: 'ldap_server', label: '服务器地址', placeholder: '例如：ldap://127.0.0.1:389' },
-  { key: 'base_dn', label: 'Bind DN' },
-  { key: 'password', label: '密码', type: 'password' },
-  { key: 'ou', label: '用户目录（OU）' },
-  { key: 'ldap_filter', label: '用户过滤器' },
-  {
-    key: 'ldap_mapping',
-    label: '字段映射',
-    placeholder: '{"name":"name","email":"mail","username":"cn"}',
-    type: 'textarea',
-  },
-]
+defineOptions({ name: 'LdapAuthenticationSetting' })
+const authFormRef = useTemplateRef<FormInstance>('authFormRef')
+const loading = ref(false)
+const form = reactive<AuthProviderSetting>({
+  auth_type: 'LDAP',
+  config: { ldap_server: '', base_dn: '', password: '', ou: '', ldap_filter: '', ldap_mapping: '' },
+  is_active: false,
+})
+const rules = reactive<FormRules<AuthProviderSetting>>({
+  'config.ldap_server': [{ required: true, message: '请输入服务器地址', trigger: 'blur' }],
+  'config.base_dn': [{ required: true, message: '请输入Bind DN', trigger: 'blur' }],
+  'config.password': [{ required: true, message: '请输入密码', trigger: 'blur' }],
+  'config.ou': [{ required: true, message: '请输入用户目录（OU）', trigger: 'blur' }],
+  'config.ldap_filter': [{ required: true, message: '请输入用户过滤器', trigger: 'blur' }],
+  'config.ldap_mapping': [{ required: true, message: '请输入字段映射', trigger: 'blur' }],
+})
+
+function loadSetting() {
+  loading.value = true
+  return AuthSettingApi.getAuthSetting(form.auth_type)
+    .then((setting) => {
+      const ldapMapping = setting.config?.ldap_mapping
+      Object.assign(form, setting, {
+        config: {
+          ...form.config,
+          ...setting.config,
+          ldap_mapping:
+            typeof ldapMapping === 'string' && ldapMapping
+              ? JSON.stringify(JSON.parse(ldapMapping))
+              : ldapMapping,
+        },
+      })
+    })
+    .finally(() => (loading.value = false))
+}
+function submit(action: 'save' | 'test') {
+  authFormRef.value?.validate((valid) => {
+    if (!valid) return
+    loading.value = true
+    const request =
+      action === 'test'
+        ? AuthSettingApi.postAuthSettingConnection(form)
+        : AuthSettingApi.putAuthSetting(form.auth_type, form)
+    request
+      .then(() => MsgSuccess(action === 'test' ? '连接成功' : '保存成功'))
+      .finally(() => (loading.value = false))
+  })
+}
+onMounted(() => loadSetting())
 </script>
 
 <template>
-  <AuthProviderForm auth-type="LDAP" :fields="fields" testable />
+  <el-form
+    ref="authFormRef"
+    v-loading="loading"
+    class="max-w-200"
+    :model="form"
+    :rules="rules"
+    label-position="top"
+  >
+    <el-form-item label="LDAP 地址" prop="config.ldap_server"
+      ><el-input v-model="form.config.ldap_server" placeholder="请输入LDAP 地址"
+    /></el-form-item>
+    <el-form-item label="绑定 DN" prop="config.base_dn"
+      ><el-input v-model="form.config.base_dn" placeholder="请输入绑定 DN"
+    /></el-form-item>
+    <el-form-item label="密码" prop="config.password">
+      <el-input
+        v-model="form.config.password"
+        type="password"
+        show-password
+        placeholder="请输入密码"
+      />
+    </el-form-item>
+    <el-form-item label="用户 OU" prop="config.ou">
+      <el-input v-model="form.config.ou" placeholder="请输入用户 OU" />
+    </el-form-item>
+    <el-form-item label="用户过滤器" prop="config.ldap_filter"
+      ><el-input v-model="form.config.ldap_filter" placeholder="请输入用户过滤器"
+    /></el-form-item>
+    <el-form-item label="LDAP 属性映射" prop="config.ldap_mapping"
+      ><el-input
+        v-model="form.config.ldap_mapping"
+        type="textarea"
+        :rows="4"
+        placeholder="请输入 LDAP 属性映射"
+    /></el-form-item>
+    <el-form-item>
+      <div class="flex flex-col">
+        <span>启用 LDAP 认证</span>
+        <el-switch v-model="form.is_active" class="self-start" />
+      </div>
+    </el-form-item>
+    <div>
+      <el-button type="primary" @click="submit('save')">保存</el-button>
+      <el-button @click="submit('test')">测试连接</el-button>
+    </div>
+  </el-form>
 </template>
diff --git a/ui/src/views/system/settings/authentication/components/OAuth2.vue b/ui/src/views/system/settings/authentication/components/OAuth2.vue
index b2c604f10c6..ee781828c29 100644
--- a/ui/src/views/system/settings/authentication/components/OAuth2.vue
+++ b/ui/src/views/system/settings/authentication/components/OAuth2.vue
@@ -1,19 +1,111 @@
 <script setup lang="ts">
-import AuthProviderForm, { type AuthProviderField } from './AuthProviderForm.vue'
+import { onMounted, reactive, ref, useTemplateRef } from 'vue'
+import type { FormInstance, FormRules } from 'element-plus'
+import AuthSettingApi from '@/api/admin/system/auth-setting'
+import type { AuthProviderSetting } from '@/api/types'
+import { MsgSuccess } from '@/utils/message'
 
-const callbackUrl = `${window.location.origin}${window.MaxKB?.prefix ?? ''}/api/oauth2`
-const fields: AuthProviderField[] = [
-  { key: 'authEndpoint', label: '授权端点' },
-  { key: 'tokenEndpoint', label: 'Token 端点' },
-  { key: 'userInfoEndpoint', label: '用户信息端点' },
-  { key: 'scope', label: 'Scope' },
-  { key: 'clientId', label: 'Client ID' },
-  { key: 'clientSecret', label: 'Client Secret', type: 'password' },
-  { key: 'fieldMapping', label: '字段映射', type: 'textarea' },
-  { key: 'redirectUrl', label: '回调地址', defaultValue: callbackUrl },
-]
+defineOptions({ name: 'OidcAuthenticationSetting' })
+const defaultRedirectUrl = `${window.location.origin}${window.MaxKB?.prefix ?? ''}/api/oauth2`
+
+const authFormRef = useTemplateRef<FormInstance>('authFormRef')
+const loading = ref(false)
+const form = reactive<AuthProviderSetting>({
+  auth_type: 'OAuth2',
+  config: {
+    authEndpoint: '',
+    tokenEndpoint: '',
+    userInfoEndpoint: '',
+    scope: '',
+    clientId: '',
+    clientSecret: '',
+    redirectUrl: '',
+    fieldMapping: '',
+  },
+  is_active: false,
+})
+const rules = reactive<FormRules<AuthProviderSetting>>({
+  'config.authEndpoint': [{ required: true, message: '请输入授权端地址', trigger: 'blur' }],
+  'config.tokenEndpoint': [{ required: true, message: '请输入 Token 端地址', trigger: 'blur' }],
+  'config.userInfoEndpoint': [{ required: true, message: '请输入用户信息端地址', trigger: 'blur' }],
+  'config.scope': [{ required: true, message: '请输入连接范围', trigger: 'blur' }],
+  'config.clientId': [{ required: true, message: '请输入客户端 ID', trigger: 'blur' }],
+  'config.clientSecret': [{ required: true, message: '请输入客户端密钥', trigger: 'blur' }],
+  'config.fieldMapping': [{ required: true, message: '请输入字段映射', trigger: 'blur' }],
+  'config.redirectUrl': [{ required: true, message: '请输入回调地址', trigger: 'blur' }],
+})
+
+function loadSetting() {
+  loading.value = true
+
+  return AuthSettingApi.getAuthSetting(form.auth_type)
+    .then((setting) => {
+      const settingConfig = setting.config ?? {}
+      Object.assign(form, setting, {
+        config: {
+          ...form.config,
+          ...settingConfig,
+          redirectUrl: settingConfig.redirectUrl || defaultRedirectUrl,
+        },
+      })
+    })
+    .finally(() => {
+      loading.value = false
+    })
+}
+function submit() {
+  authFormRef.value?.validate((valid) => {
+    if (!valid) return
+    loading.value = true
+    AuthSettingApi.putAuthSetting(form.auth_type, form)
+      .then(() => MsgSuccess('保存成功'))
+      .finally(() => (loading.value = false))
+  })
+}
+onMounted(() => loadSetting())
 </script>
 
 <template>
-  <AuthProviderForm auth-type="OAuth2" :fields="fields" />
+  <el-form
+    ref="authFormRef"
+    v-loading="loading"
+    class="max-w-200"
+    :model="form"
+    :rules="rules"
+    label-position="top"
+  >
+    <el-form-item label="授权端地址" prop="config.authEndpoint"
+      ><el-input v-model="form.config.authEndpoint" placeholder="请输入授权端地址"
+    /></el-form-item>
+    <el-form-item label="Token 端地址" prop="config.tokenEndpoint"
+      ><el-input v-model="form.config.tokenEndpoint" placeholder="请输入 Token 端地址"
+    /></el-form-item>
+    <el-form-item label="用户信息端地址" prop="config.userInfoEndpoint"
+      ><el-input v-model="form.config.userInfoEndpoint" placeholder="请输入用户信息端地址"
+    /></el-form-item>
+    <el-form-item label="连接范围" prop="config.scope"
+      ><el-input v-model="form.config.scope" placeholder="请输入连接范围"
+    /></el-form-item>
+    <el-form-item label="客户端 ID" prop="config.clientId"
+      ><el-input v-model="form.config.clientId" placeholder="请输入客户端 ID"
+    /></el-form-item>
+    <el-form-item label="客户端密钥" prop="config.clientSecret"
+      ><el-input
+        v-model="form.config.clientSecret"
+        type="password"
+        show-password
+        placeholder="请输入客户端密钥"
+    /></el-form-item>
+    <el-form-item label="字段映射" prop="config.fieldMapping"
+      ><el-input v-model="form.config.fieldMapping" placeholder="请输入字段映射"
+    /></el-form-item>
+    <el-form-item label="回调地址" prop="config.redirectUrl"
+      ><el-input v-model="form.config.redirectUrl" placeholder="请输入回调地址"
+    /></el-form-item>
+    <el-form-item
+      ><div class="flex flex-col">
+        <span>启用 OAuth2 认证</span><el-switch v-model="form.is_active" class="self-start" /></div
+    ></el-form-item>
+    <el-button type="primary" @click="submit">保存</el-button>
+  </el-form>
 </template>
diff --git a/ui/src/views/system/settings/authentication/components/OIDC.vue b/ui/src/views/system/settings/authentication/components/OIDC.vue
index f8bf18ca522..924baa67a21 100644
--- a/ui/src/views/system/settings/authentication/components/OIDC.vue
+++ b/ui/src/views/system/settings/authentication/components/OIDC.vue
@@ -1,25 +1,117 @@
 <script setup lang="ts">
-import AuthProviderForm, { type AuthProviderField } from './AuthProviderForm.vue'
+import { onMounted, reactive, ref, useTemplateRef } from 'vue'
+import type { FormInstance, FormRules } from 'element-plus'
+import AuthSettingApi from '@/api/admin/system/auth-setting'
+import type { AuthProviderSetting } from '@/api/types'
+import { MsgSuccess } from '@/utils/message'
 
-const callbackUrl = `${window.location.origin}${window.MaxKB?.prefix ?? ''}/api/oidc`
-const fields: AuthProviderField[] = [
-  { key: 'authEndpoint', label: '授权端点' },
-  { key: 'tokenEndpoint', label: 'Token 端点' },
-  { key: 'userInfoEndpoint', label: '用户信息端点' },
-  { key: 'scope', label: 'Scope', placeholder: 'openid profile email' },
-  { key: 'state', label: 'State', required: false },
-  { key: 'clientId', label: 'Client ID' },
-  { key: 'clientSecret', label: 'Client Secret', type: 'password' },
-  {
-    key: 'fieldMapping',
-    label: '字段映射',
-    defaultValue: '{"username":"preferred_username","email":"email"}',
-    type: 'textarea',
+defineOptions({ name: 'OidcAuthenticationSetting' })
+const defaultFieldMapping = '{"username":"preferred_username","email":"email"}'
+const defaultRedirectUrl = `${window.location.origin}${window.MaxKB?.prefix ?? ''}/api/oidc`
+
+const authFormRef = useTemplateRef<FormInstance>('authFormRef')
+const loading = ref(false)
+const form = reactive<AuthProviderSetting>({
+  auth_type: 'OIDC',
+  config: {
+    authEndpoint: '',
+    tokenEndpoint: '',
+    userInfoEndpoint: '',
+    scope: '',
+    state: '',
+    clientId: '',
+    clientSecret: '',
+    fieldMapping: defaultFieldMapping,
+    redirectUrl: defaultRedirectUrl,
   },
-  { key: 'redirectUrl', label: '回调地址', defaultValue: callbackUrl },
-]
+  is_active: false,
+})
+const rules = reactive<FormRules<AuthProviderSetting>>({
+  'config.authEndpoint': [{ required: true, message: '请输入授权端地址', trigger: 'blur' }],
+  'config.tokenEndpoint': [{ required: true, message: '请输入 Token 端地址', trigger: 'blur' }],
+  'config.userInfoEndpoint': [{ required: true, message: '请输入用户信息端地址', trigger: 'blur' }],
+  'config.scope': [{ required: true, message: '请输入 Scope', trigger: 'blur' }],
+  'config.clientId': [{ required: true, message: '请输入客户端 ID', trigger: 'blur' }],
+  'config.clientSecret': [{ required: true, message: '请输入客户端密钥', trigger: 'blur' }],
+  'config.fieldMapping': [{ required: true, message: '请输入字段映射', trigger: 'blur' }],
+  'config.redirectUrl': [{ required: true, message: '请输入回调地址', trigger: 'blur' }],
+})
+
+function loadSetting() {
+  loading.value = true
+
+  return AuthSettingApi.getAuthSetting(form.auth_type)
+    .then((setting) => {
+      const settingConfig = setting.config ?? {}
+      Object.assign(form, setting, {
+        config: {
+          ...form.config,
+          ...settingConfig,
+          fieldMapping: settingConfig.fieldMapping || defaultFieldMapping,
+          redirectUrl: settingConfig.redirectUrl || defaultRedirectUrl,
+        },
+      })
+    })
+    .finally(() => {
+      loading.value = false
+    })
+}
+function submit() {
+  authFormRef.value?.validate((valid) => {
+    if (!valid) return
+    loading.value = true
+    AuthSettingApi.putAuthSetting(form.auth_type, form)
+      .then(() => MsgSuccess('保存成功'))
+      .finally(() => (loading.value = false))
+  })
+}
+onMounted(() => loadSetting())
 </script>
 
 <template>
-  <AuthProviderForm auth-type="OIDC" :fields="fields" />
+  <el-form
+    ref="authFormRef"
+    v-loading="loading"
+    class="max-w-200"
+    :model="form"
+    :rules="rules"
+    label-position="top"
+  >
+    <el-form-item label="授权端地址" prop="config.authEndpoint"
+      ><el-input v-model="form.config.authEndpoint" placeholder="请输入授权端地址"
+    /></el-form-item>
+    <el-form-item label="Token 端地址" prop="config.tokenEndpoint"
+      ><el-input v-model="form.config.tokenEndpoint" placeholder="请输入 Token 端地址"
+    /></el-form-item>
+    <el-form-item label="用户信息端地址" prop="config.userInfoEndpoint"
+      ><el-input v-model="form.config.userInfoEndpoint" placeholder="请输入用户信息端地址"
+    /></el-form-item>
+    <el-form-item label="Scope" prop="config.scope"
+      ><el-input v-model="form.config.scope" placeholder="openid+profile+email"
+    /></el-form-item>
+    <el-form-item label="State"
+      ><el-input v-model="form.config.state" placeholder="请输入"
+    /></el-form-item>
+    <el-form-item label="客户端 ID" prop="config.clientId"
+      ><el-input v-model="form.config.clientId" placeholder="请输入客户端 ID"
+    /></el-form-item>
+    <el-form-item label="客户端密钥" prop="config.clientSecret"
+      ><el-input
+        v-model="form.config.clientSecret"
+        type="password"
+        show-password
+        placeholder="请输入客户端密钥"
+    /></el-form-item>
+    <el-form-item label="字段映射" prop="config.fieldMapping"
+      ><el-input v-model="form.config.fieldMapping" placeholder="请输入字段映射"
+    /></el-form-item>
+    <el-form-item label="回调地址" prop="config.redirectUrl"
+      ><el-input v-model="form.config.redirectUrl" placeholder="请输入回调地址"
+    /></el-form-item>
+    <el-form-item
+      ><div class="flex flex-col">
+        <span>启用 OIDC 认证</span><el-switch v-model="form.is_active" class="self-start" /></div
+    ></el-form-item>
+    <el-button type="primary" @click="submit">保存</el-button>
+  </el-form>
 </template>
diff --git a/ui/src/views/system/settings/authentication/components/SCAN.vue b/ui/src/views/system/settings/authentication/components/SCAN.vue
deleted file mode 100644
index 95ef5bf2961..00000000000
--- a/ui/src/views/system/settings/authentication/components/SCAN.vue
+++ /dev/null
@@ -1,137 +0,0 @@
-<script setup lang="ts">
-import { onMounted, ref, useTemplateRef } from 'vue'
-import PlatformSourceApi from '@/api/admin/system/platform-source'
-import type { QrLoginPlatformRequest, QrLoginPlatformType } from '@/api/types'
-import { MsgSuccess } from '@/utils/message'
-import EditModal from './EditModal.vue'
-
-interface QrPlatformView extends QrLoginPlatformRequest {
-  isValid: boolean
-  name: string
-}
-
-const platformDefinitions: Array<{
-  configKeys: string[]
-  key: QrLoginPlatformType
-  name: string
-}> = [
-  { key: 'wecom', name: '企业微信', configKeys: ['corp_id', 'agent_id', 'app_secret'] },
-  { key: 'dingtalk', name: '钉钉', configKeys: ['corp_id', 'app_key', 'app_secret'] },
-  { key: 'lark', name: '飞书', configKeys: ['app_key', 'app_secret'] },
-]
-
-const editModalRef = useTemplateRef<InstanceType<typeof EditModal>>('editModalRef')
-const loading = ref(false)
-const platforms = ref<QrPlatformView[]>(createDefaultPlatforms())
-const fieldLabels: Record<string, string> = {
-  agent_id: 'Agent ID',
-  app_key: 'App Key',
-  app_secret: 'App Secret',
-  callback_url: '回调地址',
-  corp_id: 'Corp ID',
-}
-
-function createDefaultPlatforms() {
-  const apiBaseUrl = `${window.location.origin}${window.MaxKB?.prefix ?? ''}/api`
-  return platformDefinitions.map(({ configKeys, key, name }) => ({
-    key,
-    name,
-    config: Object.fromEntries([
-      ...configKeys.map((configKey) => [configKey, '']),
-      ['callback_url', `${apiBaseUrl}/${key}`],
-    ]),
-    isActive: false,
-    isValid: false,
-  }))
-}
-
-/* 扫码登录平台加载与状态切换 */
-function loadPlatforms() {
-  loading.value = true
-  return PlatformSourceApi.getQrLoginPlatforms()
-    .then((settings) => {
-      const defaultPlatforms = createDefaultPlatforms()
-      platforms.value = defaultPlatforms.map((platform) => {
-        const setting = settings.find(({ auth_type }) => auth_type === platform.key)
-        if (!setting) return platform
-        return {
-          ...platform,
-          config: { ...platform.config, ...setting.config },
-          isActive: setting.is_active,
-          isValid: setting.is_valid,
-        }
-      })
-    })
-    .finally(() => {
-      loading.value = false
-    })
-}
-
-function togglePlatform(platform: QrPlatformView) {
-  loading.value = true
-  PlatformSourceApi.putQrLoginPlatform(platform)
-    .then(() => MsgSuccess('保存成功'))
-    .finally(() => {
-      loading.value = false
-    })
-}
-
-function editPlatform(platform: QrPlatformView) {
-  editModalRef.value?.open(platform)
-}
-
-onMounted(loadPlatforms)
-</script>
-
-<template>
-  <div v-loading="loading" class="h-full min-h-0">
-    <el-scrollbar>
-      <div class="max-w-240 space-y-4 px-6 pb-6 pt-4">
-        <article
-          v-for="platform in platforms"
-          :key="platform.key"
-          class="rounded-md border border-N300 p-5"
-        >
-          <div class="flex-between">
-            <div class="flex items-center gap-3">
-              <div class="flex-center h-9 w-9 rounded-md bg-primary/10 text-primary">
-                {{ platform.name.slice(0, 1) }}
-              </div>
-              <div>
-                <div class="flex items-center gap-2">
-                  <h6>{{ platform.name }}</h6>
-                  <el-tag v-if="platform.isValid" size="small" type="success">已验证</el-tag>
-                </div>
-                <p class="text-N500">配置后，用户可通过{{ platform.name }}扫码登录。</p>
-              </div>
-            </div>
-
-            <div v-if="platform.isValid" class="flex items-center gap-2">
-              <span class="text-N500">{{ platform.isActive ? '已启用' : '未启用' }}</span>
-              <el-switch v-model="platform.isActive" @change="togglePlatform(platform)" />
-            </div>
-            <el-button v-else type="primary" @click="editPlatform(platform)">接入</el-button>
-          </div>
-
-          <template v-if="platform.isValid">
-            <el-divider class="!my-4" />
-            <dl class="grid grid-cols-2 gap-x-8 gap-y-3">
-              <div v-for="(value, key) in platform.config" :key="key" class="min-w-0">
-                <dt class="text-N500">{{ fieldLabels[key] ?? key }}</dt>
-                <dd class="truncate text-N900">
-                  {{ key === 'app_secret' ? '••••••••••••' : value }}
-                </dd>
-              </div>
-            </dl>
-            <div class="mt-4 flex gap-3">
-              <el-button type="primary" @click="editPlatform(platform)">编辑</el-button>
-              <el-button @click="editPlatform(platform)">验证</el-button>
-            </div>
-          </template>
-        </article>
-      </div>
-    </el-scrollbar>
-
-    <EditModal ref="editModalRef" @saved="loadPlatforms" />
-  </div>
-</template>
diff --git a/ui/src/views/system/settings/authentication/components/SCANLogin.vue b/ui/src/views/system/settings/authentication/components/SCANLogin.vue
new file mode 100644
index 00000000000..43af77dc69d
--- /dev/null
+++ b/ui/src/views/system/settings/authentication/components/SCANLogin.vue
@@ -0,0 +1,146 @@
+<script setup lang="ts">
+import { onMounted, ref, useTemplateRef } from 'vue'
+import AuthScanApi from '@/api/admin/system/auth-scan-setting'
+import type { QrCodeProvider, QrLoginPlatform, QrLoginPlatformRequest } from '@/api/types'
+import { LOGIN_METHOD_LABELS, SCAN_FIELD_LABELS } from '@/constants/auth'
+import { MsgSuccess, MsgError } from '@/utils/message'
+import dingtalkLogo from '@/assets/logo/logo_dingtalk.svg'
+import enterpriseWechatLogo from '@/assets/logo/logo_enterprise-wechat.svg'
+import larkLogo from '@/assets/logo/logo_lark.svg'
+import EditSCANDrawer from '../EditSCANDrawer.vue'
+
+interface QrLoginPlatformView extends QrLoginPlatformRequest {
+  isValid: boolean
+  logo: string
+}
+
+const platformDefinitions: {
+  configKeys: string[]
+  key: QrCodeProvider
+  logo: string
+}[] = [
+  {
+    key: 'wecom',
+    logo: enterpriseWechatLogo,
+    configKeys: ['corp_id', 'agent_id', 'app_secret'],
+  },
+  {
+    key: 'dingtalk',
+    logo: dingtalkLogo,
+    configKeys: ['corp_id', 'app_key', 'app_secret'],
+  },
+  { key: 'lark', logo: larkLogo, configKeys: ['app_key', 'app_secret'] },
+]
+
+const apiBaseUrl = `${window.location.origin}${window.MaxKB?.prefix ?? ''}/api`
+
+const loading = ref(false)
+const qrLoginPlatforms = ref<QrLoginPlatformView[]>([])
+
+function createQrLoginPlatforms(settings: QrLoginPlatform[]): QrLoginPlatformView[] {
+  return platformDefinitions.map(({ configKeys, key, logo }) => {
+    const setting = settings.find(({ auth_type }) => auth_type === key)
+
+    return {
+      key,
+      logo,
+      config: Object.fromEntries([
+        ...configKeys.map((configKey) => [configKey, setting?.config[configKey] ?? '']),
+        ['callback_url', setting?.config.callback_url || `${apiBaseUrl}/${key}`],
+      ]),
+      isActive: setting?.is_active ?? false,
+      isValid: setting?.is_valid ?? false,
+    }
+  })
+}
+
+/* 扫码登录平台加载与状态切换 */
+function loadQrPlatforms() {
+  loading.value = true
+  return AuthScanApi.getQrLoginPlatforms()
+    .then((settings) => {
+      qrLoginPlatforms.value = createQrLoginPlatforms(settings)
+    })
+    .finally(() => {
+      loading.value = false
+    })
+}
+
+/* 改变状态 */
+function handlePlatformStatusChange(platform: QrLoginPlatformView) {
+  loading.value = true
+  return AuthScanApi.putQrLoginPlatform({
+    key: platform.key,
+    config: platform.config,
+    isActive: platform.isActive,
+  })
+    .then(() => MsgSuccess('保存成功'))
+    .catch((error) => {
+      platform.isActive = !platform.isActive
+      throw error
+    })
+    .finally(() => {
+      loading.value = false
+    })
+}
+
+/* 编辑 */
+const editScanDrawerRef = useTemplateRef<InstanceType<typeof EditSCANDrawer>>('editScanDrawerRef')
+
+function handleEditPlatform(platform: QrLoginPlatformView) {
+  editScanDrawerRef.value?.open(platform)
+}
+
+/* 校验 */
+function handleValidatePlatform(platform: QrLoginPlatformView) {
+  loading.value = true
+  return AuthScanApi.postValidateQrLoginPlatform(platform)
+    .then((res) => {
+      // TODO: 校验判断有误
+      res ? MsgSuccess('校验成功') : MsgError('校验失败')
+    })
+    .finally(() => {
+      loading.value = false
+    })
+}
+
+onMounted(loadQrPlatforms)
+</script>
+
+<template>
+  <div class="pr-2 flex flex-col gap-4">
+    <template v-for="platform in qrLoginPlatforms" :key="platform.key">
+      <el-card shadow="hover">
+        <div class="flex-between mb-4">
+          <div class="flex items-center gap-2">
+            <img :src="platform.logo" :alt="LOGIN_METHOD_LABELS[platform.key]" class="h-6 w-6" />
+            <h4>{{ LOGIN_METHOD_LABELS[platform.key] }}</h4>
+            <el-tag v-if="platform.isValid" size="small" type="success">有效</el-tag>
+            <!-- <el-tag v-if="!platform.isValid" size="small" type="danger">无效</el-tag> -->
+          </div>
+
+          <div v-if="platform.isValid" class="flex items-center gap-2">
+            <span>{{ platform.isActive ? '已启用' : '已关闭' }}</span>
+            <el-switch v-model="platform.isActive" @change="handlePlatformStatusChange(platform)" />
+          </div>
+          <el-button v-else type="primary" @click="handleEditPlatform(platform)">接入</el-button>
+        </div>
+        <div class="border-t" v-if="platform.isValid">
+          <div class="py-4 grid grid-cols-2 gap-x-6 gap-y-4">
+            <div v-for="(value, key) in platform.config" :key="key">
+              <p class="text-N600">{{ SCAN_FIELD_LABELS[key] ?? key }}</p>
+              <p>
+                {{ key === 'app_secret' ? '••••••••••••' : value }}
+              </p>
+            </div>
+          </div>
+
+          <el-button type="primary" @click="handleEditPlatform(platform)">编辑</el-button>
+          <el-button @click="handleValidatePlatform(platform)">校验</el-button>
+        </div>
+      </el-card>
+    </template>
+  </div>
+
+  <EditSCANDrawer ref="editScanDrawerRef" @refresh="loadQrPlatforms" />
+</template>
diff --git a/ui/src/views/system/settings/authentication/components/Saml2.vue b/ui/src/views/system/settings/authentication/components/Saml2.vue
index 77d9b2c19c9..433d16975ff 100644
--- a/ui/src/views/system/settings/authentication/components/Saml2.vue
+++ b/ui/src/views/system/settings/authentication/components/Saml2.vue
@@ -1,33 +1,123 @@
 <script setup lang="ts">
-import AuthProviderForm, { type AuthProviderField } from './AuthProviderForm.vue'
+import { onMounted, reactive, ref, useTemplateRef } from 'vue'
+import type { FormInstance, FormRules } from 'element-plus'
+import AuthSettingApi from '@/api/admin/system/auth-setting'
+import type { AuthProviderSetting } from '@/api/types'
+import { MsgSuccess } from '@/utils/message'
 
 defineOptions({ name: 'SamlAuthenticationSetting' })
-
-const apiBaseUrl = `${window.location.origin}${window.MaxKB?.prefix ?? ''}/api/saml2`
-const fields: AuthProviderField[] = [
-  { key: 'idpMetaUrl', label: 'Identity Provider 元数据地址' },
-  {
-    key: 'wantAssertionsSigned',
-    label: '要求 Assertions 签名',
-    defaultValue: true,
-    required: false,
-    type: 'switch',
-  },
-  {
-    key: 'wantAuthnRequestsSigned',
-    label: '对认证请求签名',
-    defaultValue: true,
-    required: false,
-    type: 'switch',
+const samlApiBaseUrl = `${window.location.origin}${window.MaxKB?.prefix ?? ''}/api/saml2`
+const authFormRef = useTemplateRef<FormInstance>('authFormRef')
+const loading = ref(false)
+const form = reactive<AuthProviderSetting>({
+  auth_type: 'SAML2',
+  config: {
+    idpMetaUrl: '',
+    wantAssertionsSigned: true,
+    wantAuthnRequestsSigned: true,
+    privateKey: '',
+    certificate: '',
+    mapping: '',
+    spEntityId: `${samlApiBaseUrl}/metadata`,
+    spAcs: `${samlApiBaseUrl}/sso`,
   },
-  { key: 'privateKey', label: '私钥', type: 'textarea' },
-  { key: 'certificate', label: '证书', type: 'textarea' },
-  { key: 'mapping', label: '字段映射', type: 'textarea' },
-  { key: 'spEntityId', label: 'SP Entity ID', defaultValue: `${apiBaseUrl}/metadata` },
-  { key: 'spAcs', label: 'SP ACS', defaultValue: `${apiBaseUrl}/sso` },
-]
+  is_active: false,
+})
+const rules = reactive<FormRules<AuthProviderSetting>>({
+  'config.idpMetaUrl': [{ required: true, message: '请输入 Idp MetaData Url', trigger: 'blur' }],
+  'config.privateKey': [{ required: true, message: '请输入 SP Private Key', trigger: 'blur' }],
+  'config.certificate': [{ required: true, message: '请输入 SP Certificate', trigger: 'blur' }],
+  'config.mapping': [{ required: true, message: '请输入字段映射', trigger: 'blur' }],
+  'config.spEntityId': [{ required: true, message: '请输入 SP Entity Id', trigger: 'blur' }],
+  'config.spAcs': [{ required: true, message: '请输入 SP Ace', trigger: 'blur' }],
+})
+
+function loadSetting() {
+  loading.value = true
+
+  return AuthSettingApi.getAuthSetting(form.auth_type)
+    .then((setting) => {
+      const settingConfig = setting.config ?? {}
+      const mapping = settingConfig.mapping
+
+      Object.assign(form, setting, {
+        config: {
+          ...form.config,
+          ...settingConfig,
+          mapping:
+            typeof mapping === 'string' && mapping
+              ? JSON.stringify(JSON.parse(mapping))
+              : mapping || '',
+          spEntityId: settingConfig.spEntityId || `${samlApiBaseUrl}/metadata`,
+          spAcs: settingConfig.spAcs || `${samlApiBaseUrl}/sso`,
+        },
+      })
+    })
+    .finally(() => {
+      loading.value = false
+    })
+}
+function submit() {
+  authFormRef.value?.validate((valid) => {
+    if (!valid) return
+    loading.value = true
+    AuthSettingApi.putAuthSetting(form.auth_type, form)
+      .then(() => MsgSuccess('保存成功'))
+      .finally(() => (loading.value = false))
+  })
+}
+onMounted(() => loadSetting())
 </script>
 
 <template>
-  <AuthProviderForm auth-type="SAML2" :fields="fields" />
+  <el-form
+    ref="authFormRef"
+    v-loading="loading"
+    class="max-w-200"
+    :model="form"
+    :rules="rules"
+    label-position="top"
+  >
+    <el-form-item label="Idp MetaData Url" prop="config.idpMetaUrl"
+      ><el-input v-model="form.config.idpMetaUrl" placeholder="请输入 Idp MetaData Url"
+    /></el-form-item>
+    <el-form-item
+      ><div class="flex flex-col">
+        <span>开启请求签名</span
+        ><el-switch v-model="form.config.wantAssertionsSigned" class="self-start" /></div
+    ></el-form-item>
+    <el-form-item
+      ><div class="flex flex-col">
+        <span>开启断言签名</span
+        ><el-switch v-model="form.config.wantAuthnRequestsSigned" class="self-start" /></div
+    ></el-form-item>
+    <el-form-item label="SP Private Key" prop="config.privateKey"
+      ><el-input
+        v-model="form.config.privateKey"
+        placeholder="请输入 SP Private Key"
+        type="password"
+        show-password
+    /></el-form-item>
+    <el-form-item label="SP Certificate" prop="config.certificate"
+      ><el-input
+        v-model="form.config.certificate"
+        placeholder="请输入 SP Certificate"
+        type="password"
+        show-password
+    /></el-form-item>
+    <el-form-item label="字段映射" prop="config.mapping"
+      ><el-input v-model="form.config.mapping" placeholder="请输入字段映射"
+    /></el-form-item>
+    <el-form-item label="SP Entity ID" prop="config.spEntityId"
+      ><el-input v-model="form.config.spEntityId" placeholder="请输入 SP Entity ID"
+    /></el-form-item>
+    <el-form-item label="SP ACS" prop="config.spAcs"
+      ><el-input v-model="form.config.spAcs" placeholder="请输入 SP ACS"
+    /></el-form-item>
+    <el-form-item
+      ><div class="flex flex-col">
+        <span>启用 SAML2 认证</span><el-switch v-model="form.is_active" class="self-start" /></div
+    ></el-form-item>
+    <el-button type="primary" @click="submit">保存</el-button>
+  </el-form>
 </template>
diff --git a/ui/src/views/system/settings/email/EmailSettingsView.vue b/ui/src/views/system/settings/email/EmailSettingsView.vue
index 58814b441d2..6354cfbf880 100644
--- a/ui/src/views/system/settings/email/EmailSettingsView.vue
+++ b/ui/src/views/system/settings/email/EmailSettingsView.vue
@@ -54,7 +54,7 @@ function submitEmailSetting(action: 'save' | 'test') {
   })
 }
 
-onMounted(loadEmailSetting)
+onMounted(() => loadEmailSetting())
 </script>
 
 <template>