From 9f70409844b92e436f7d62f963c6190bac35e689 Mon Sep 17 00:00:00 2001
From: wangdan-fit2cloud <dan.wang@fit2cloud.com>
Date: Wed, 12 Aug 2026 09:26:41 +0800
Subject: [PATCH] style: format

---
 ui/src/api/admin/system/platform-source.ts    |  25 ++
 ui/src/api/types/system-authentication.ts     |  15 +
 ui/src/components/COMPONENT_README.md         |   9 +-
 .../global/mk-view-layout/index.vue           |  42 ++-
 .../global/mk-view-layout/layout-main.ts      |  95 ------
 ui/src/views/VIEW_README.md                   |   3 +
 .../chat/user-groups/GroupsListView.vue       |  14 +-
 .../views/system/chat/users/UserListView.vue  |  20 +-
 .../system/identity/groups/GroupsListView.vue |  17 +-
 .../system/identity/users/UserListView.vue    |  14 +-
 .../identity/workspaces/WorkspaceListView.vue |  14 +-
 .../operate-logs/OperateLogListView.vue       |   6 +-
 .../AuthenticationSettingsView.vue            | 321 +++---------------
 .../component/AuthProviderForm.vue            | 130 +++++++
 .../settings/authentication/component/CAS.vue |  14 +
 .../authentication/component/EditModal.vue    | 115 +++++++
 .../authentication/component/LDAP.vue         |  21 ++
 .../authentication/component/OAuth2.vue       |  19 ++
 .../authentication/component/OIDC.vue         |  25 ++
 .../authentication/component/SCAN.vue         | 137 ++++++++
 .../authentication/component/Saml2.vue        |  33 ++
 .../authentication/component/Setting.vue      | 140 ++++++++
 .../settings/email/EmailSettingsView.vue      |  88 ++---
 23 files changed, 865 insertions(+), 452 deletions(-)
 create mode 100644 ui/src/api/admin/system/platform-source.ts
 delete mode 100644 ui/src/components/global/mk-view-layout/layout-main.ts
 create mode 100644 ui/src/views/system/settings/authentication/component/AuthProviderForm.vue
 create mode 100644 ui/src/views/system/settings/authentication/component/CAS.vue
 create mode 100644 ui/src/views/system/settings/authentication/component/EditModal.vue
 create mode 100644 ui/src/views/system/settings/authentication/component/LDAP.vue
 create mode 100644 ui/src/views/system/settings/authentication/component/OAuth2.vue
 create mode 100644 ui/src/views/system/settings/authentication/component/OIDC.vue
 create mode 100644 ui/src/views/system/settings/authentication/component/SCAN.vue
 create mode 100644 ui/src/views/system/settings/authentication/component/Saml2.vue
 create mode 100644 ui/src/views/system/settings/authentication/component/Setting.vue

diff --git a/ui/src/api/admin/system/platform-source.ts b/ui/src/api/admin/system/platform-source.ts
new file mode 100644
index 00000000000..4e716020c81
--- /dev/null
+++ b/ui/src/api/admin/system/platform-source.ts
@@ -0,0 +1,25 @@
+import { get, post, put } from '../core/request'
+import type { QrLoginPlatform, QrLoginPlatformRequest } from '@/api/types'
+
+const prefix = '/platform'
+
+/** 获取扫码登录平台配置。 */
+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)
+}
+
+export default {
+  getQrLoginPlatforms,
+  postQrLoginPlatformConnection,
+  putQrLoginPlatform,
+}
diff --git a/ui/src/api/types/system-authentication.ts b/ui/src/api/types/system-authentication.ts
index 72793abcd9e..843404db582 100644
--- a/ui/src/api/types/system-authentication.ts
+++ b/ui/src/api/types/system-authentication.ts
@@ -24,3 +24,18 @@ export interface LoginAuthSetting {
   system_options?: LoginMethodOption[]
   workspace_id?: string
 }
+
+export type QrLoginPlatformType = 'wecom' | 'dingtalk' | 'lark'
+
+export interface QrLoginPlatform {
+  auth_type: QrLoginPlatformType
+  config: Record<string, string>
+  is_active: boolean
+  is_valid: boolean
+}
+
+export interface QrLoginPlatformRequest {
+  config: Record<string, string>
+  isActive: boolean
+  key: QrLoginPlatformType
+}
diff --git a/ui/src/components/COMPONENT_README.md b/ui/src/components/COMPONENT_README.md
index 91007544242..d3def83a89a 100644
--- a/ui/src/components/COMPONENT_README.md
+++ b/ui/src/components/COMPONENT_README.md
@@ -51,8 +51,7 @@ src/components/
 │   │   └── index.vue             # SVG Symbol 与 Element Plus 图标统一入口
 │   ├── mk-view-layout/
 │   │   ├── index.vue             # 路由页面标题、操作区和内容区统一结构
-│   │   ├── layout-aside.vue      # 页面可选左侧栏结构
-│   │   └── layout-main.ts        # 右侧标题标记提取与滚动内容渲染
+│   │   └── layout-aside.vue      # 页面可选左侧栏结构
 │   ├── mk-search-input/
 │   │   └── index.vue             # 带默认搜索图标的输入框
 │   ├── mk-status-label/
@@ -253,9 +252,9 @@ Element Plus Dropdown 属性和事件通过 `$attrs` 传入，并暴露 `handleO
 
 路由页面的通用内容结构，统一提供满高弹性布局及可选左侧栏。标题优先使用 `title` Prop，未传入
 时读取当前路由的 `meta.title`。`aside` 和默认作用域插槽都提供 `title` 与对应区域的 `Header`
-标记组件。默认插槽中的 `Header` 会由布局提取到右侧滚动区上方，其余节点统一放入
-`el-scrollbar`；页面因此可以在同一个插槽中组织标题、内容和空状态，并只写一次业务状态判断。
-传入 `aside` 插槽后才会渲染左侧栏；左右结构上方的独立内容放入 `top` 插槽。页面加载状态通过
+包装组件，页面可以在同一个插槽中组织标题、内容和空状态，并只写一次业务状态判断。组件不统一
+处理内容滚动，需要滚动的页面自行使用 `el-scrollbar`。传入 `aside` 插槽后才会渲染左侧栏；左右
+结构上方的独立内容放入 `top` 插槽。页面加载状态通过
 `loading` Prop 传入，由组件将 Element Plus Loading 遮罩绑定到整个布局根节点。默认插槽没有
 声明作用域参数时会自动显示当前标题；使用 `#default="{ Header }"` 后则由页面通过
 `<component :is="Header">` 控制标题，空状态分支不会自动补充标题。
diff --git a/ui/src/components/global/mk-view-layout/index.vue b/ui/src/components/global/mk-view-layout/index.vue
index 467a24d5a2a..3b181cfeac5 100644
--- a/ui/src/components/global/mk-view-layout/index.vue
+++ b/ui/src/components/global/mk-view-layout/index.vue
@@ -1,8 +1,7 @@
 <script setup lang="ts">
-import type { Component, FunctionalComponent } from 'vue'
+import { Fragment, h, isVNode, type FunctionalComponent, type VNode } from 'vue'
 import { useRoute } from 'vue-router'
 import LayoutAside from './layout-aside.vue'
-import LayoutMain from './layout-main'
 
 defineOptions({ name: 'MkViewLayout', inheritAttrs: false })
 
@@ -18,16 +17,39 @@ const props = withDefaults(
 
 defineSlots<{
   aside?: (props: { Header: FunctionalComponent; title: string }) => unknown
-  default?: (props: { Header: Component; title: string }) => unknown
+  default?: (props: { Header: FunctionalComponent; title: string }) => unknown
   top?: () => unknown
 }>()
 
 const route = useRoute()
 const title = computed(() => props.title || route.meta.title || '')
 const slots = useSlots()
-const fallbackTitle = computed(() =>
-  !slots.default || slots.default.length === 0 ? title.value : '',
-)
+const LayoutHeader: FunctionalComponent = (_, { slots }) =>
+  h('header', { class: 'flex-between shrink-0 py-4' }, slots.default?.())
+
+function flattenSlotNodes(children: unknown): VNode[] {
+  const childNodes = Array.isArray(children) ? children : [children]
+
+  return childNodes.flatMap((child) => {
+    if (!isVNode(child)) return []
+    if (child.type === Fragment) return flattenSlotNodes(child.children)
+    return [child]
+  })
+}
+
+const LayoutContent: FunctionalComponent = () => {
+  const contentNodes = flattenSlotNodes(
+    slots.default?.({ Header: LayoutHeader, title: title.value }),
+  )
+  const hasCustomHeader = contentNodes.some((node) => node.type === LayoutHeader)
+
+  return [
+    hasCustomHeader || !title.value
+      ? null
+      : h('header', { class: 'flex-between shrink-0 py-4' }, [h('h4', title.value)]),
+    ...contentNodes,
+  ]
+}
 </script>
 
 <template>
@@ -43,11 +65,9 @@ const fallbackTitle = computed(() =>
         </template>
       </LayoutAside>
 
-      <LayoutMain :fallback-title="fallbackTitle" :title="title">
-        <template #default="{ Header, title: mainTitle }">
-          <slot :Header="Header" :title="mainTitle" />
-        </template>
-      </LayoutMain>
+      <main class="mb-6 flex min-w-0 flex-1 flex-col px-6">
+        <LayoutContent />
+      </main>
     </div>
   </div>
 </template>
diff --git a/ui/src/components/global/mk-view-layout/layout-main.ts b/ui/src/components/global/mk-view-layout/layout-main.ts
deleted file mode 100644
index 1a611fe193d..00000000000
--- a/ui/src/components/global/mk-view-layout/layout-main.ts
+++ /dev/null
@@ -1,95 +0,0 @@
-import {
-  Fragment,
-  createTextVNode,
-  defineComponent,
-  h,
-  isVNode,
-  type Component,
-  type Slots,
-  type SlotsType,
-  type VNode,
-} from 'vue'
-import { ElScrollbar } from 'element-plus'
-
-type LayoutMainSlotProps = {
-  Header: Component
-  title: string
-}
-
-const LayoutMainHeader = defineComponent({
-  name: 'MkViewLayoutMainHeader',
-  setup(_, { slots }) {
-    return () => slots.default?.()
-  },
-})
-
-function flattenSlotNodes(children: unknown): VNode[] {
-  const childNodes = Array.isArray(children) ? children : [children]
-
-  return childNodes.flatMap((child) => {
-    if (child === undefined || child === null || typeof child === 'boolean') return []
-    if (!isVNode(child)) return [createTextVNode(String(child))]
-    if (child.type === Fragment) return flattenSlotNodes(child.children)
-    return [child]
-  })
-}
-
-function getHeaderNodes(headerNode: VNode) {
-  const headerSlots = headerNode.children as Slots | null
-  return flattenSlotNodes(headerSlots?.default?.())
-}
-
-export default defineComponent({
-  name: 'MkViewLayoutMain',
-  props: {
-    fallbackTitle: {
-      default: '',
-      type: String,
-    },
-    title: {
-      default: '',
-      type: String,
-    },
-  },
-  slots: Object as SlotsType<{
-    default?: (props: LayoutMainSlotProps) => VNode[]
-  }>,
-  setup(props, { slots }) {
-    return () => {
-      const headerNodes: VNode[] = []
-      const contentNodes: VNode[] = []
-
-      flattenSlotNodes(slots.default?.({ Header: LayoutMainHeader, title: props.title })).forEach(
-        (node) => {
-          if (node.type === LayoutMainHeader) {
-            headerNodes.push(...getHeaderNodes(node))
-            return
-          }
-
-          contentNodes.push(node)
-        },
-      )
-
-      const resolvedHeaderNodes =
-        headerNodes.length > 0
-          ? headerNodes
-          : props.fallbackTitle
-            ? [h('h4', props.fallbackTitle)]
-            : []
-
-      return h('main', { class: 'flex min-w-0 flex-1 flex-col px-6 mb-6' }, [
-        resolvedHeaderNodes.length
-          ? h('header', { class: 'flex-between shrink-0 py-4' }, resolvedHeaderNodes)
-          : null,
-        h(
-          ElScrollbar,
-          {
-            class: 'min-h-0 flex-1',
-            viewClass: 'flex min-h-full flex-col',
-          },
-          { default: () => contentNodes },
-        ),
-      ])
-    }
-  },
-})
diff --git a/ui/src/views/VIEW_README.md b/ui/src/views/VIEW_README.md
index ebb694843ca..f699c16bf99 100644
--- a/ui/src/views/VIEW_README.md
+++ b/ui/src/views/VIEW_README.md
@@ -28,6 +28,9 @@
 - 页面脚本中的状态、计算属性和处理方法按照同一业务流程集中放置，并使用简短的业务备注划分
   列表查询、批量操作等流程。流程较长的函数应在确认、请求、刷新等关键阶段添加说明，重点解释
   Promise 返回、执行顺序和业务约束，不为含义明确的单行代码逐句添加注释。
+- 页面模板的事件绑定不直接调用 Dialog、Drawer 等组件实例暴露的 `open()` 方法。应在对应业务
+  流程的方法区域定义语义明确的 `handleOpenXxx` 处理函数，由处理函数调用组件实例的 `open()`，
+  模板只绑定该处理函数；创建和编辑共用同一浮层时，可通过处理函数的可选参数区分操作场景。
 
 参考结构：
 
diff --git a/ui/src/views/system/chat/user-groups/GroupsListView.vue b/ui/src/views/system/chat/user-groups/GroupsListView.vue
index ad687651451..7dc3ce8d614 100644
--- a/ui/src/views/system/chat/user-groups/GroupsListView.vue
+++ b/ui/src/views/system/chat/user-groups/GroupsListView.vue
@@ -18,6 +18,10 @@ import CreateOrUpdateGroupDialog from './dialog/CreateOrUpdateGroupDialog.vue'
 const groupDialogRef =
   useTemplateRef<InstanceType<typeof CreateOrUpdateGroupDialog>>('groupDialogRef')
 
+function handleOpenGroupDialog(group?: ListItem) {
+  groupDialogRef.value?.open(group)
+}
+
 /* 用户组列表与选择 */
 const groupsLoading = ref(false)
 const chatUserGroups = ref<ListItem[]>([])
@@ -101,6 +105,10 @@ function handleMemberSearch(query?: RequestParams) {
 const memberDialogRef =
   useTemplateRef<InstanceType<typeof CreateGroupMemberDialog>>('memberDialogRef')
 
+function handleOpenMemberDialog() {
+  memberDialogRef.value?.open()
+}
+
 /* (批量)移除成员 */
 const batchSelectedMembers = ref<ChatUserGroupMember[]>([])
 function handleBatchSelectionChange(selection: unknown[]) {
@@ -140,7 +148,7 @@ onMounted(() => loadChatUserGroups())
       <component :is="Header">
         <h4>{{ title }}</h4>
         <el-tooltip content="创建用户组" placement="top">
-          <el-button text type="primary" @click="groupDialogRef?.open()">
+          <el-button text type="primary" @click="handleOpenGroupDialog()">
             <MkIcon name="icon_add_outlined" :size="18" />
           </el-button>
         </el-tooltip>
@@ -152,7 +160,7 @@ onMounted(() => loadChatUserGroups())
       >
         <template #action-dropdown="{ row }">
           <MkDropdownMenu>
-            <MkDropdownItem @click="groupDialogRef?.open(row)">
+            <MkDropdownItem @click="handleOpenGroupDialog(row)">
               <template #icon><MkIcon name="icon_edit_outlined" /></template>
               <span>重命名</span>
             </MkDropdownItem>
@@ -178,7 +186,7 @@ onMounted(() => loadChatUserGroups())
         </component>
 
         <div class="flex-between mb-4">
-          <el-button type="primary" @click="memberDialogRef?.open()">
+          <el-button type="primary" @click="handleOpenMemberDialog">
             <MkIcon name="icon_add_outlined" />
             <span>添加成员</span>
           </el-button>
diff --git a/ui/src/views/system/chat/users/UserListView.vue b/ui/src/views/system/chat/users/UserListView.vue
index 657b766de8a..10af80da3c8 100644
--- a/ui/src/views/system/chat/users/UserListView.vue
+++ b/ui/src/views/system/chat/users/UserListView.vue
@@ -13,9 +13,17 @@ import BatchSetUserGroupDialog from './dialog/BatchSetUserGroupDialog.vue'
 /* 添加编辑用户表单drawer */
 const userFormDrawerRef = ref<InstanceType<typeof UserFromDrawer>>()
 
+function handleOpenUserFormDrawer(chatUser?: ChatUser) {
+  userFormDrawerRef.value?.open(chatUser)
+}
+
 /* 导入用户 */
 const importUsersDialogRef = ref<InstanceType<typeof ImportUsersDialog>>()
 
+function handleOpenImportUsersDialog() {
+  importUsersDialogRef.value?.open()
+}
+
 /* 列表查询相关 */
 const userTableRef = useTemplateRef('userTableRef')
 const chatUsersLoading = ref(false)
@@ -72,6 +80,10 @@ function loadChatUsers(resetQuery = false) {
 /* 密码修改dialog */
 const userPwdDialogRef = ref<InstanceType<typeof UserPwdDialog>>()
 
+function handleOpenUserPwdDialog(chatUser: ChatUser) {
+  userPwdDialogRef.value?.open(chatUser)
+}
+
 /* 修改用户状态 */
 function handleChangeStatus(user: ChatUser) {
   const nextActive = !user.is_active
@@ -144,11 +156,11 @@ onMounted(() => loadChatUsers())
         <h4>{{ title }}</h4>
         <div class="flex items-center">
           <MkComplexSearch :fields="searchFields" @change="handleSearchChange" />
-          <el-button class="ml-3" @click="importUsersDialogRef?.open()">
+          <el-button class="ml-3" @click="handleOpenImportUsersDialog">
             <MkIcon name="icon_import_outlined" />
             <span>导入用户</span>
           </el-button>
-          <el-button type="primary" @click="userFormDrawerRef?.open()">
+          <el-button type="primary" @click="handleOpenUserFormDrawer()">
             <MkIcon name="icon_add_outlined" />
             <span>创建用户</span>
           </el-button>
@@ -217,12 +229,12 @@ onMounted(() => loadChatUsers())
               <el-divider direction="vertical" />
               <div class="flex gap-1">
                 <el-tooltip content="编辑" placement="top">
-                  <el-button type="primary" text @click.stop="userFormDrawerRef?.open(row)">
+                  <el-button type="primary" text @click.stop="handleOpenUserFormDrawer(row)">
                     <mk-icon name="icon_edit_outlined"></mk-icon>
                   </el-button>
                 </el-tooltip>
                 <el-tooltip content="修改用户密码" placement="top">
-                  <el-button type="primary" text @click.stop="userPwdDialogRef?.open(row)">
+                  <el-button type="primary" text @click.stop="handleOpenUserPwdDialog(row)">
                     <mk-icon name="icon-key_outlined"></mk-icon>
                   </el-button>
                 </el-tooltip>
diff --git a/ui/src/views/system/identity/groups/GroupsListView.vue b/ui/src/views/system/identity/groups/GroupsListView.vue
index b90801c99fb..43ca5069280 100644
--- a/ui/src/views/system/identity/groups/GroupsListView.vue
+++ b/ui/src/views/system/identity/groups/GroupsListView.vue
@@ -44,6 +44,10 @@ function handleMemberSelectionChange(selection: unknown[]) {
 const memberDialogRef =
   useTemplateRef<InstanceType<typeof CreateGroupMemberDialog>>('memberDialogRef')
 
+function handleOpenMemberDialog() {
+  memberDialogRef.value?.open()
+}
+
 function handleRemoveMembers(member?: SystemUserGroupMember) {
   const group = currentGroup.value
   const members = member ? [member] : selectedGroupMembers.value
@@ -102,10 +106,14 @@ function handleGroupSelect(group: SystemUserGroup) {
   loadUserGroupMembers()
 }
 
-/* 新增、重命名与删除用户组 */
+/* 新增、重命名用户组 */
 const groupDialogRef =
   useTemplateRef<InstanceType<typeof CreateOrUpdateGroupDialog>>('groupDialogRef')
 
+function handleOpenGroupDialog(group?: SystemUserGroup) {
+  groupDialogRef.value?.open(group)
+}
+
 function handleGroupSaved(group: SystemUserGroup) {
   const existingIndex = userGroups.value.findIndex(({ id }) => id === group.id)
   if (existingIndex >= 0) {
@@ -119,6 +127,7 @@ function handleGroupSaved(group: SystemUserGroup) {
   }
 }
 
+/* 删除用户组 */
 function deleteGroup(group: SystemUserGroup) {
   MsgConfirm(`确定删除用户组"${group.name}"吗？`, '删除后，组内成员不会被删除。')
     .then(() => {
@@ -195,7 +204,7 @@ onMounted(() => loadWorkspaceOptions())
       <component :is="Header">
         <h4>{{ title }}</h4>
         <el-tooltip content="创建用户组" placement="top">
-          <el-button class="-mr-1" text type="primary" @click="groupDialogRef?.open()">
+          <el-button class="-mr-1" text type="primary" @click="handleOpenGroupDialog()">
             <MkIcon name="icon_add_outlined" :size="18" />
           </el-button>
         </el-tooltip>
@@ -208,7 +217,7 @@ onMounted(() => loadWorkspaceOptions())
       >
         <template #action-dropdown="{ row }">
           <MkDropdownMenu>
-            <MkDropdownItem @click="groupDialogRef?.open(row)">
+            <MkDropdownItem @click="handleOpenGroupDialog(row)">
               <template #icon>
                 <MkIcon name="icon_edit_outlined" />
               </template>
@@ -239,7 +248,7 @@ onMounted(() => loadWorkspaceOptions())
         </component>
 
         <div class="flex-between mb-4">
-          <el-button type="primary" @click="memberDialogRef?.open()">
+          <el-button type="primary" @click="handleOpenMemberDialog">
             <MkIcon name="icon_add_outlined" />
             <span>添加成员</span>
           </el-button>
diff --git a/ui/src/views/system/identity/users/UserListView.vue b/ui/src/views/system/identity/users/UserListView.vue
index f23f27ff4da..c4dbd692bc2 100644
--- a/ui/src/views/system/identity/users/UserListView.vue
+++ b/ui/src/views/system/identity/users/UserListView.vue
@@ -16,6 +16,10 @@ const { auth, user } = useStore()
 /* 添加编辑用户表单drawer */
 const userFormDrawerRef = ref<InstanceType<typeof UserFromDrawer>>()
 
+function handleOpenUserFormDrawer(systemUser?: SystemUser) {
+  userFormDrawerRef.value?.open(systemUser)
+}
+
 /* 列表查询相关 */
 const userTableRef = useTemplateRef('userTableRef')
 const systemUsersLoading = ref(false)
@@ -65,6 +69,10 @@ function loadSystemUsers(resetQuery = false) {
 /* 密码修改dialog */
 const userPwdDialogRef = ref<InstanceType<typeof UserPwdDialog>>()
 
+function handleOpenUserPwdDialog(systemUser: SystemUser) {
+  userPwdDialogRef.value?.open(systemUser)
+}
+
 /* 修改用户状态 */
 function handleChangeStatus(systemUser: SystemUser) {
   const nextActive = !systemUser.is_active
@@ -142,7 +150,7 @@ onMounted(() => loadSystemUsers())
             <MkIcon name="icon_import_outlined" />
             <span>导入用户</span>
           </el-button>
-          <el-button type="primary" @click="userFormDrawerRef?.open()">
+          <el-button type="primary" @click="handleOpenUserFormDrawer()">
             <MkIcon name="icon_add_outlined" />
             <span>创建用户</span>
           </el-button>
@@ -226,12 +234,12 @@ onMounted(() => loadSystemUsers())
               <el-divider direction="vertical" />
               <div class="flex gap-1">
                 <el-tooltip content="编辑" placement="top">
-                  <el-button type="primary" text @click.stop="userFormDrawerRef?.open(row)">
+                  <el-button type="primary" text @click.stop="handleOpenUserFormDrawer(row)">
                     <mk-icon name="icon_edit_outlined"></mk-icon>
                   </el-button>
                 </el-tooltip>
                 <el-tooltip content="修改用户密码" placement="top">
-                  <el-button type="primary" text @click.stop="userPwdDialogRef?.open(row)">
+                  <el-button type="primary" text @click.stop="handleOpenUserPwdDialog(row)">
                     <mk-icon name="icon-key_outlined"></mk-icon>
                   </el-button>
                 </el-tooltip>
diff --git a/ui/src/views/system/identity/workspaces/WorkspaceListView.vue b/ui/src/views/system/identity/workspaces/WorkspaceListView.vue
index 6b0d7ea6f34..f1a41d1a738 100644
--- a/ui/src/views/system/identity/workspaces/WorkspaceListView.vue
+++ b/ui/src/views/system/identity/workspaces/WorkspaceListView.vue
@@ -12,6 +12,10 @@ import CreateOrUpdateWorkspaceDialog from './dialog/CreateOrUpdateWorkspaceDialo
 const workspaceDialogRef =
   useTemplateRef<InstanceType<typeof CreateOrUpdateWorkspaceDialog>>('workspaceDialogRef')
 
+function handleOpenWorkspaceDialog(workspace?: WorkspaceItem) {
+  workspaceDialogRef.value?.open(workspace)
+}
+
 /* 选择工作空间列表 */
 const workspaceLoading = ref(false)
 const currentWorkspace = ref<WorkspaceItem>()
@@ -133,6 +137,10 @@ function getWorkspaceMemberRowKey(member: WorkspaceMemberItem) {
 const addMemberDrawerRef =
   useTemplateRef<InstanceType<typeof AddMemberDrawer>>('addMemberDrawerRef')
 
+function handleOpenAddMemberDrawer() {
+  addMemberDrawerRef.value?.open()
+}
+
 /* 删除成员 */
 function handleRemoveMember(member: WorkspaceMemberItem) {
   const workspaceId = currentWorkspace.value?.id
@@ -194,7 +202,7 @@ onMounted(() => loadWorkspaceOptions())
       <component :is="Header">
         <h4>{{ title }}</h4>
         <el-tooltip content="创建工作空间" placement="top">
-          <el-button text type="primary" class="-mr-1" @click="workspaceDialogRef?.open()">
+          <el-button text type="primary" class="-mr-1" @click="handleOpenWorkspaceDialog()">
             <MkIcon name="icon_add_outlined" :size="18" />
           </el-button>
         </el-tooltip>
@@ -206,7 +214,7 @@ onMounted(() => loadWorkspaceOptions())
       >
         <template #action-dropdown="{ row: workspace }">
           <MkDropdownMenu>
-            <MkDropdownItem @click="workspaceDialogRef?.open(workspace)">
+            <MkDropdownItem @click="handleOpenWorkspaceDialog(workspace)">
               <template #icon>
                 <MkIcon name="icon_edit_outlined" />
               </template>
@@ -237,7 +245,7 @@ onMounted(() => loadWorkspaceOptions())
         </component>
 
         <div class="flex-between mb-4">
-          <el-button type="primary" @click="addMemberDrawerRef?.open()">
+          <el-button type="primary" @click="handleOpenAddMemberDrawer">
             <MkIcon name="icon_add_outlined" />
             <span>添加成员</span>
           </el-button>
diff --git a/ui/src/views/system/operate-logs/OperateLogListView.vue b/ui/src/views/system/operate-logs/OperateLogListView.vue
index 4b88c476b5a..a6380bf1c7e 100644
--- a/ui/src/views/system/operate-logs/OperateLogListView.vue
+++ b/ui/src/views/system/operate-logs/OperateLogListView.vue
@@ -100,6 +100,10 @@ function loadFilterOptions() {
   ])
 }
 
+function handleOpenDetail(log: OperateLog) {
+  detailDialogRef.value?.open(log)
+}
+
 /* 日志导出 */
 function handleExport() {
   loading.value = true
@@ -272,7 +276,7 @@ onMounted(() => {
       </el-table-column>
       <el-table-column label="操作" width="70" fixed="right">
         <template #default="{ row }">
-          <el-button text type="primary" @click="detailDialogRef?.open(row)">详情</el-button>
+          <el-button text type="primary" @click="handleOpenDetail(row)">详情</el-button>
         </template>
       </el-table-column>
     </MkTable>
diff --git a/ui/src/views/system/settings/authentication/AuthenticationSettingsView.vue b/ui/src/views/system/settings/authentication/AuthenticationSettingsView.vue
index 5fa457bdb54..dd94217fa40 100644
--- a/ui/src/views/system/settings/authentication/AuthenticationSettingsView.vue
+++ b/ui/src/views/system/settings/authentication/AuthenticationSettingsView.vue
@@ -1,294 +1,55 @@
 <script setup lang="ts">
-import { computed, onMounted, reactive, ref, useTemplateRef, watch } from 'vue'
-import type { FormInstance, FormRules } from 'element-plus'
-import AuthSettingApi from '@/api/admin/system/auth-setting'
-import type { AuthProviderSetting, AuthProviderType, LoginAuthSetting } from '@/api/types'
-import { MsgSuccess } from '@/utils/message'
-
-interface ProviderField {
-  key: string
-  label: string
-  placeholder: string
-  type?: 'password' | 'textarea'
-}
-
-interface ProviderDefinition {
+import { ref, type Component } from 'vue'
+import LDAP from './component/LDAP.vue'
+import CAS from './component/CAS.vue'
+import OIDC from './component/OIDC.vue'
+import SCAN from './component/SCAN.vue'
+import OAuth2 from './component/OAuth2.vue'
+import Saml2 from './component/Saml2.vue'
+import Setting from './component/Setting.vue'
+
+interface AuthenticationTab {
+  component: Component
   label: string
-  type: AuthProviderType
-  fields: ProviderField[]
+  name: string
 }
 
-const providerDefinitions: ProviderDefinition[] = [
-  {
-    label: 'LDAP',
-    type: 'LDAP',
-    fields: [
-      { key: 'ldap_server', label: '服务器地址', placeholder: '请输入 LDAP 服务器地址' },
-      { key: 'base_dn', label: 'Bind DN', placeholder: '请输入 Bind DN' },
-      { key: 'password', label: '密码', placeholder: '请输入密码', type: 'password' },
-      { key: 'ou', label: '用户目录', placeholder: '请输入用户目录' },
-      { key: 'ldap_filter', label: '用户过滤器', placeholder: '请输入 LDAP 用户过滤器' },
-      {
-        key: 'ldap_mapping',
-        label: '字段映射',
-        placeholder: '请输入 JSON 格式的字段映射',
-        type: 'textarea',
-      },
-    ],
-  },
-  {
-    label: 'CAS',
-    type: 'CAS',
-    fields: [
-      { key: 'service', label: 'CAS 服务地址', placeholder: '请输入 CAS 服务地址' },
-      { key: 'validate_url', label: '校验地址', placeholder: '请输入校验地址' },
-      { key: 'redirect_url', label: '回调地址', placeholder: '请输入回调地址' },
-    ],
-  },
-  {
-    label: 'OIDC',
-    type: 'OIDC',
-    fields: [
-      { key: 'auth_endpoint', label: '授权端点', placeholder: '请输入授权端点' },
-      { key: 'token_endpoint', label: 'Token 端点', placeholder: '请输入 Token 端点' },
-      { key: 'userinfo_endpoint', label: '用户信息端点', placeholder: '请输入用户信息端点' },
-      { key: 'scope', label: 'Scope', placeholder: '请输入 Scope' },
-      { key: 'client_id', label: 'Client ID', placeholder: '请输入 Client ID' },
-      {
-        key: 'client_secret',
-        label: 'Client Secret',
-        placeholder: '请输入 Client Secret',
-        type: 'password',
-      },
-      {
-        key: 'mapping',
-        label: '字段映射',
-        placeholder: '请输入 JSON 格式的字段映射',
-        type: 'textarea',
-      },
-      { key: 'redirect_url', label: '回调地址', placeholder: '请输入回调地址' },
-    ],
-  },
-  {
-    label: 'OAuth2',
-    type: 'OAuth2',
-    fields: [
-      { key: 'auth_endpoint', label: '授权端点', placeholder: '请输入授权端点' },
-      { key: 'token_endpoint', label: 'Token 端点', placeholder: '请输入 Token 端点' },
-      { key: 'userinfo_endpoint', label: '用户信息端点', placeholder: '请输入用户信息端点' },
-      { key: 'scope', label: 'Scope', placeholder: '请输入 Scope' },
-      { key: 'client_id', label: 'Client ID', placeholder: '请输入 Client ID' },
-      {
-        key: 'client_secret',
-        label: 'Client Secret',
-        placeholder: '请输入 Client Secret',
-        type: 'password',
-      },
-      {
-        key: 'mapping',
-        label: '字段映射',
-        placeholder: '请输入 JSON 格式的字段映射',
-        type: 'textarea',
-      },
-      { key: 'redirect_url', label: '回调地址', placeholder: '请输入回调地址' },
-    ],
-  },
-  {
-    label: 'SAML2',
-    type: 'SAML2',
-    fields: [
-      { key: 'idp', label: 'Identity Provider', placeholder: '请输入 Identity Provider 地址' },
-      { key: 'private_key', label: '私钥', placeholder: '请输入私钥', type: 'textarea' },
-      { key: 'certificate', label: '证书', placeholder: '请输入证书', type: 'textarea' },
-      {
-        key: 'mapping',
-        label: '字段映射',
-        placeholder: '请输入 JSON 格式的字段映射',
-        type: 'textarea',
-      },
-      { key: 'sp_entity_id', label: 'SP Entity ID', placeholder: '请输入 SP Entity ID' },
-      { key: 'sp_acs', label: 'SP ACS', placeholder: '请输入 SP ACS 地址' },
-    ],
-  },
+const activeName = ref('SETTING')
+const authenticationTabs: AuthenticationTab[] = [
+  { label: '登录设置', name: 'SETTING', component: Setting },
+  { 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 },
 ]
-
-const defaultLoginSetting: LoginAuthSetting = {
-  default_value: 'LOCAL',
-  failed_attempts: 5,
-  lock_time: 10,
-  login_methods: ['LOCAL'],
-  max_attempts: 1,
-}
-
-const activeTab = ref('LOGIN')
-const loading = ref(false)
-const loginFormRef = useTemplateRef<FormInstance>('loginFormRef')
-const providerFormRef = useTemplateRef<FormInstance>('providerFormRef')
-const loginSetting = reactive<LoginAuthSetting>({ ...defaultLoginSetting })
-const providerSetting = reactive<AuthProviderSetting>({
-  auth_type: 'LDAP',
-  config: {},
-  is_active: false,
-})
-const currentProvider = computed(() =>
-  providerDefinitions.find(({ type }) => type === activeTab.value),
-)
-const loginMethodOptions = computed(() => loginSetting.system_options ?? [])
-const providerRules = computed<FormRules>(() =>
-  Object.fromEntries(
-    (currentProvider.value?.fields ?? []).map(({ key, label }) => [
-      `config.${key}`,
-      [{ required: true, message: `请输入${label}`, trigger: 'blur' }],
-    ]),
-  ),
-)
-
-/* 登录设置加载与提交 */
-function loadLoginSetting() {
-  loading.value = true
-  return AuthSettingApi.getLoginSetting()
-    .then((setting) => Object.assign(loginSetting, defaultLoginSetting, setting))
-    .finally(() => {
-      loading.value = false
-    })
-}
-
-function submitLoginSetting() {
-  loginFormRef.value?.validate((valid) => {
-    if (!valid) return
-    loading.value = true
-    AuthSettingApi.putLoginSetting(loginSetting)
-      .then(() => MsgSuccess('保存成功'))
-      .finally(() => {
-        loading.value = false
-      })
-  })
-}
-
-/* 认证源加载、测试与提交 */
-function loadProviderSetting(authType: AuthProviderType) {
-  loading.value = true
-  return AuthSettingApi.getAuthSetting(authType)
-    .then((setting) =>
-      Object.assign(
-        providerSetting,
-        { auth_type: authType, config: {}, is_active: false },
-        setting,
-      ),
-    )
-    .finally(() => {
-      loading.value = false
-    })
-}
-
-function submitProviderSetting(action: 'save' | 'test') {
-  providerFormRef.value?.validate((valid) => {
-    if (!valid) return
-    loading.value = true
-    const request =
-      action === 'test'
-        ? AuthSettingApi.postAuthSettingConnection(providerSetting)
-        : AuthSettingApi.putAuthSetting(providerSetting.auth_type, providerSetting)
-    request
-      .then(() => MsgSuccess(action === 'test' ? '连接成功' : '保存成功'))
-      .finally(() => {
-        loading.value = false
-      })
-  })
-}
-
-watch(activeTab, (tab) => {
-  if (tab !== 'LOGIN') loadProviderSetting(tab as AuthProviderType)
-})
-
-onMounted(loadLoginSetting)
 </script>
 
 <template>
-  <MkViewLayout :loading="loading">
-    <el-tabs v-model="activeTab" class="h-full">
-      <el-tab-pane label="登录设置" name="LOGIN">
-        <el-form ref="loginFormRef" class="max-w-3xl" :model="loginSetting" label-position="top">
-          <el-form-item label="允许的登录方式" prop="login_methods" required>
-            <el-checkbox-group v-model="loginSetting.login_methods">
-              <el-checkbox
-                v-for="option in loginMethodOptions"
-                :key="option.value"
-                :label="option.value"
-              >
-                {{ option.label }}
-              </el-checkbox>
-            </el-checkbox-group>
-          </el-form-item>
-          <el-form-item label="默认登录方式" prop="default_value" required>
-            <el-select v-model="loginSetting.default_value" class="w-full">
-              <el-option
-                v-for="option in loginMethodOptions.filter(({ value }) =>
-                  loginSetting.login_methods.includes(value),
-                )"
-                :key="option.value"
-                :label="option.label"
-                :value="option.value"
-              />
-            </el-select>
-          </el-form-item>
-          <div class="grid grid-cols-3 gap-4">
-            <el-form-item label="最大并发登录数">
-              <el-input-number v-model="loginSetting.max_attempts" :min="-1" />
-            </el-form-item>
-            <el-form-item label="登录失败锁定次数">
-              <el-input-number v-model="loginSetting.failed_attempts" :min="-1" />
-            </el-form-item>
-            <el-form-item label="锁定时间（分钟）">
-              <el-input-number v-model="loginSetting.lock_time" :min="1" />
-            </el-form-item>
-          </div>
-          <el-button type="primary" @click="submitLoginSetting">保存</el-button>
-        </el-form>
-      </el-tab-pane>
-
+  <MkViewLayout class="authentication-settings">
+    <el-tabs v-model="activeName" class="authentication-tabs h-full">
       <el-tab-pane
-        v-for="provider in providerDefinitions"
-        :key="provider.type"
-        :label="provider.label"
-        :name="provider.type"
+        v-for="authenticationTab in authenticationTabs"
+        :key="authenticationTab.name"
+        :label="authenticationTab.label"
+        :name="authenticationTab.name"
+        lazy
       >
-        <el-scrollbar class="h-full">
-          <el-form
-            v-if="currentProvider?.type === provider.type"
-            ref="providerFormRef"
-            class="max-w-3xl"
-            :model="providerSetting"
-            :rules="providerRules"
-            label-position="top"
-          >
-            <el-form-item
-              v-for="field in provider.fields"
-              :key="field.key"
-              :label="field.label"
-              :prop="`config.${field.key}`"
-            >
-              <el-input
-                v-model="providerSetting.config[field.key]"
-                :placeholder="field.placeholder"
-                :rows="field.type === 'textarea' ? 4 : undefined"
-                :show-password="field.type === 'password'"
-                :type="field.type ?? 'text'"
-              />
-            </el-form-item>
-            <el-form-item>
-              <el-switch v-model="providerSetting.is_active" />
-              <span class="ml-2">启用认证</span>
-            </el-form-item>
-            <div class="flex gap-3">
-              <el-button type="primary" @click="submitProviderSetting('save')">保存</el-button>
-              <el-button v-if="provider.type === 'LDAP'" @click="submitProviderSetting('test')">
-                测试连接
-              </el-button>
-            </div>
-          </el-form>
-        </el-scrollbar>
+        <component :is="authenticationTab.component" />
       </el-tab-pane>
     </el-tabs>
   </MkViewLayout>
 </template>
+
+<style scoped lang="scss">
+.authentication-tabs {
+  :deep(.el-tabs__content) {
+    height: calc(100% - 56px);
+  }
+
+  :deep(.el-tab-pane) {
+    height: 100%;
+  }
+}
+</style>
diff --git a/ui/src/views/system/settings/authentication/component/AuthProviderForm.vue b/ui/src/views/system/settings/authentication/component/AuthProviderForm.vue
new file mode 100644
index 00000000000..e65e60ab2dd
--- /dev/null
+++ b/ui/src/views/system/settings/authentication/component/AuthProviderForm.vue
@@ -0,0 +1,130 @@
+<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/component/CAS.vue b/ui/src/views/system/settings/authentication/component/CAS.vue
new file mode 100644
index 00000000000..09b591b8e8d
--- /dev/null
+++ b/ui/src/views/system/settings/authentication/component/CAS.vue
@@ -0,0 +1,14 @@
+<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 },
+]
+</script>
+
+<template>
+  <AuthProviderForm auth-type="CAS" :fields="fields" />
+</template>
diff --git a/ui/src/views/system/settings/authentication/component/EditModal.vue b/ui/src/views/system/settings/authentication/component/EditModal.vue
new file mode 100644
index 00000000000..1e29ed2633d
--- /dev/null
+++ b/ui/src/views/system/settings/authentication/component/EditModal.vue
@@ -0,0 +1,115 @@
+<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/component/LDAP.vue b/ui/src/views/system/settings/authentication/component/LDAP.vue
new file mode 100644
index 00000000000..00287244405
--- /dev/null
+++ b/ui/src/views/system/settings/authentication/component/LDAP.vue
@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import AuthProviderForm, { type AuthProviderField } from './AuthProviderForm.vue'
+
+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',
+  },
+]
+</script>
+
+<template>
+  <AuthProviderForm auth-type="LDAP" :fields="fields" testable />
+</template>
diff --git a/ui/src/views/system/settings/authentication/component/OAuth2.vue b/ui/src/views/system/settings/authentication/component/OAuth2.vue
new file mode 100644
index 00000000000..b2c604f10c6
--- /dev/null
+++ b/ui/src/views/system/settings/authentication/component/OAuth2.vue
@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import AuthProviderForm, { type AuthProviderField } from './AuthProviderForm.vue'
+
+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 },
+]
+</script>
+
+<template>
+  <AuthProviderForm auth-type="OAuth2" :fields="fields" />
+</template>
diff --git a/ui/src/views/system/settings/authentication/component/OIDC.vue b/ui/src/views/system/settings/authentication/component/OIDC.vue
new file mode 100644
index 00000000000..f8bf18ca522
--- /dev/null
+++ b/ui/src/views/system/settings/authentication/component/OIDC.vue
@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import AuthProviderForm, { type AuthProviderField } from './AuthProviderForm.vue'
+
+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',
+  },
+  { key: 'redirectUrl', label: '回调地址', defaultValue: callbackUrl },
+]
+</script>
+
+<template>
+  <AuthProviderForm auth-type="OIDC" :fields="fields" />
+</template>
diff --git a/ui/src/views/system/settings/authentication/component/SCAN.vue b/ui/src/views/system/settings/authentication/component/SCAN.vue
new file mode 100644
index 00000000000..95ef5bf2961
--- /dev/null
+++ b/ui/src/views/system/settings/authentication/component/SCAN.vue
@@ -0,0 +1,137 @@
+<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/component/Saml2.vue b/ui/src/views/system/settings/authentication/component/Saml2.vue
new file mode 100644
index 00000000000..77d9b2c19c9
--- /dev/null
+++ b/ui/src/views/system/settings/authentication/component/Saml2.vue
@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import AuthProviderForm, { type AuthProviderField } from './AuthProviderForm.vue'
+
+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',
+  },
+  { 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` },
+]
+</script>
+
+<template>
+  <AuthProviderForm auth-type="SAML2" :fields="fields" />
+</template>
diff --git a/ui/src/views/system/settings/authentication/component/Setting.vue b/ui/src/views/system/settings/authentication/component/Setting.vue
new file mode 100644
index 00000000000..77b6f9bb142
--- /dev/null
+++ b/ui/src/views/system/settings/authentication/component/Setting.vue
@@ -0,0 +1,140 @@
+<script setup lang="ts">
+import { computed, onMounted, reactive, ref, useTemplateRef, watch } from 'vue'
+import type { FormInstance, FormRules } from 'element-plus'
+import AuthSettingApi from '@/api/admin/system/auth-setting'
+import type { LoginAuthSetting } from '@/api/types'
+import { MsgSuccess } from '@/utils/message'
+
+defineOptions({ name: 'LoginAuthenticationSetting' })
+
+const defaultSetting: LoginAuthSetting = {
+  default_value: 'LOCAL',
+  failed_attempts: 5,
+  lock_time: 10,
+  login_methods: ['LOCAL'],
+  max_attempts: 1,
+}
+
+const authFormRef = useTemplateRef<FormInstance>('authFormRef')
+const loading = ref(false)
+const form = reactive<LoginAuthSetting>({ ...defaultSetting })
+const loginMethodOptions = computed(() => form.system_options ?? form.auth_types ?? [])
+const selectedLoginMethodOptions = computed(() =>
+  loginMethodOptions.value.filter(({ value }) => form.login_methods.includes(value)),
+)
+const rules: FormRules<LoginAuthSetting> = {
+  default_value: [{ required: true, message: '请选择默认登录方式', trigger: 'change' }],
+  login_methods: [{ required: true, message: '请至少选择一种登录方式', trigger: 'change' }],
+}
+
+/* 登录方式加载与提交 */
+function loadSetting() {
+  loading.value = true
+  return AuthSettingApi.getLoginSetting()
+    .then((setting) => Object.assign(form, defaultSetting, setting))
+    .finally(() => {
+      loading.value = false
+    })
+}
+
+function normalizeAttemptCount(value: number | undefined) {
+  if (value === undefined || value === 0) return 1
+  return Math.max(-1, Math.trunc(value))
+}
+
+function submit() {
+  authFormRef.value?.validate((valid) => {
+    if (!valid) return
+
+    loading.value = true
+    AuthSettingApi.putLoginSetting(form)
+      .then(() => MsgSuccess('保存成功'))
+      .finally(() => {
+        loading.value = false
+      })
+  })
+}
+
+watch(
+  () => form.login_methods,
+  (loginMethods) => {
+    if (!loginMethods.includes(form.default_value)) {
+      form.default_value = loginMethods[0] ?? ''
+    }
+  },
+  { deep: true },
+)
+
+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"
+      >
+        <el-form-item label="允许的登录方式" prop="login_methods">
+          <el-checkbox-group v-model="form.login_methods">
+            <el-checkbox
+              v-for="loginMethodOption in loginMethodOptions"
+              :key="loginMethodOption.value"
+              :value="loginMethodOption.value"
+            >
+              {{ loginMethodOption.label }}
+            </el-checkbox>
+          </el-checkbox-group>
+        </el-form-item>
+
+        <el-form-item label="默认登录方式" prop="default_value">
+          <el-radio-group v-model="form.default_value">
+            <el-radio
+              v-for="loginMethodOption in selectedLoginMethodOptions"
+              :key="loginMethodOption.value"
+              :value="loginMethodOption.value"
+            >
+              {{ loginMethodOption.label }}
+            </el-radio>
+          </el-radio-group>
+        </el-form-item>
+
+        <el-form-item label="登录安全设置">
+          <div class="space-y-3">
+            <div class="flex items-center gap-2">
+              <span>同一账号最多允许</span>
+              <el-input-number
+                v-model="form.max_attempts"
+                :max="10"
+                :min="-1"
+                controls-position="right"
+                @change="form.max_attempts = normalizeAttemptCount($event)"
+              />
+              <span>个会话同时登录</span>
+              <span class="text-N500">（-1 表示不限制）</span>
+            </div>
+            <div class="flex items-center gap-2">
+              <span>连续登录失败</span>
+              <el-input-number
+                v-model="form.failed_attempts"
+                :max="10"
+                :min="-1"
+                controls-position="right"
+                @change="form.failed_attempts = normalizeAttemptCount($event)"
+              />
+              <span>次后锁定</span>
+              <el-input-number v-model="form.lock_time" :min="1" controls-position="right" />
+              <span>分钟</span>
+            </div>
+          </div>
+        </el-form-item>
+
+        <el-button type="primary" @click="submit">保存</el-button>
+      </el-form>
+    </el-scrollbar>
+  </div>
+</template>
diff --git a/ui/src/views/system/settings/email/EmailSettingsView.vue b/ui/src/views/system/settings/email/EmailSettingsView.vue
index f8d3f972037..58814b441d2 100644
--- a/ui/src/views/system/settings/email/EmailSettingsView.vue
+++ b/ui/src/views/system/settings/email/EmailSettingsView.vue
@@ -59,50 +59,52 @@ onMounted(loadEmailSetting)
 
 <template>
   <MkViewLayout class="system-settings-email" :loading="loading">
-    <el-form
-      class="max-w-200"
-      ref="emailFormRef"
-      :model="emailSetting"
-      :rules="rules"
-      label-position="top"
-      require-asterisk-position="right"
-    >
-      <el-form-item label="SMTP Host" prop="email_host">
-        <el-input v-model="emailSetting.email_host" placeholder="请输入 SMTP Host" />
-      </el-form-item>
-      <el-form-item label="SMTP Port" prop="email_port">
-        <el-input v-model="emailSetting.email_port" placeholder="请输入 SMTP Port" />
-      </el-form-item>
+    <el-scrollbar class="min-h-0 flex-1">
+      <el-form
+        class="max-w-200"
+        ref="emailFormRef"
+        :model="emailSetting"
+        :rules="rules"
+        label-position="top"
+        require-asterisk-position="right"
+      >
+        <el-form-item label="SMTP Host" prop="email_host">
+          <el-input v-model="emailSetting.email_host" placeholder="请输入 SMTP Host" />
+        </el-form-item>
+        <el-form-item label="SMTP Port" prop="email_port">
+          <el-input v-model="emailSetting.email_port" placeholder="请输入 SMTP Port" />
+        </el-form-item>
 
-      <el-form-item label="SMTP 账户" prop="email_host_user">
-        <el-input v-model="emailSetting.email_host_user" placeholder="请输入 SMTP 账户" />
-      </el-form-item>
-      <el-form-item label="发件人邮箱" prop="from_email">
-        <el-input v-model="emailSetting.from_email" type="email" placeholder="请输入发件人邮箱" />
-      </el-form-item>
-      <el-form-item label="密码" prop="email_host_password">
-        <el-input
-          v-model="emailSetting.email_host_password"
-          type="password"
-          show-password
-          placeholder="请输入发件人密码"
-        />
-      </el-form-item>
-      <el-form-item>
-        <div class="flex flex-col">
-          <p>启用 SSL<span class="text-N500">（如果 SMTP 端口是 465，通常需要启用 SSL）</span></p>
-          <el-switch v-model="emailSetting.email_use_ssl" class="self-start" />
-        </div>
-      </el-form-item>
-      <el-form-item>
-        <div class="flex flex-col">
-          <p>启用 TLS<span class="text-N500">（如果 SMTP 端口是 587，通常需要启用 TL）</span></p>
-          <el-switch v-model="emailSetting.email_use_tls" class="self-start" />
-        </div>
-      </el-form-item>
+        <el-form-item label="SMTP 账户" prop="email_host_user">
+          <el-input v-model="emailSetting.email_host_user" placeholder="请输入 SMTP 账户" />
+        </el-form-item>
+        <el-form-item label="发件人邮箱" prop="from_email">
+          <el-input v-model="emailSetting.from_email" type="email" placeholder="请输入发件人邮箱" />
+        </el-form-item>
+        <el-form-item label="密码" prop="email_host_password">
+          <el-input
+            v-model="emailSetting.email_host_password"
+            type="password"
+            show-password
+            placeholder="请输入发件人密码"
+          />
+        </el-form-item>
+        <el-form-item>
+          <div class="flex flex-col">
+            <p>启用 SSL<span class="text-N500">（如果 SMTP 端口是 465，通常需要启用 SSL）</span></p>
+            <el-switch v-model="emailSetting.email_use_ssl" class="self-start" />
+          </div>
+        </el-form-item>
+        <el-form-item>
+          <div class="flex flex-col">
+            <p>启用 TLS<span class="text-N500">（如果 SMTP 端口是 587，通常需要启用 TL）</span></p>
+            <el-switch v-model="emailSetting.email_use_tls" class="self-start" />
+          </div>
+        </el-form-item>
 
-      <el-button type="primary" @click="submitEmailSetting('save')">保存</el-button>
-      <el-button @click="submitEmailSetting('test')">测试连接</el-button>
-    </el-form>
+        <el-button type="primary" @click="submitEmailSetting('save')">保存</el-button>
+        <el-button @click="submitEmailSetting('test')">测试连接</el-button>
+      </el-form>
+    </el-scrollbar>
   </MkViewLayout>
 </template>