diff --git a/apps/chat/views/v3/chat.py b/apps/chat/views/v3/chat.py
index f53a03c1c76..bc364f42c55 100644
--- a/apps/chat/views/v3/chat.py
+++ b/apps/chat/views/v3/chat.py
@@ -485,7 +485,7 @@ def create_token_and_cache(user, access_token, operate):
                 .first()
             )
         token = ChatToken(
-            str(user.id), AuthenticationType.CHAT_USER, str(operate), application_id=application_id
+            str(user.id), AuthenticationType.CHAT_USER, str(operate), application_id=str(application_id)
         ).to_token()
         version, get_key = Cache_Version.CHAT_USER_TOKEN.value
         cache.set(get_key(token), user, timeout=60 * 60 * 2, version=version)
diff --git a/apps/common/auth/handle/impl/chat_user_token.py b/apps/common/auth/handle/impl/chat_user_token.py
index 2dbc91d3edd..d973f5f9ee2 100644
--- a/apps/common/auth/handle/impl/chat_user_token.py
+++ b/apps/common/auth/handle/impl/chat_user_token.py
@@ -92,7 +92,7 @@ def get_auth(login_type, user_id, application_id):
             if authentication_value.get("type") == "login":
                 login_value = authentication_value.get("login_value") or []
                 for _value in login_value:
-                    permission_str = f"{Group.CHAT_USER}_{_value.upper()}"
+                    permission_str = f"{Group.CHAT_USER}:{_value.upper()}"
                     permission = CHAT_PERMISSION_STR_MAP.get(permission_str)
                     if permission:
                         permission_list.append(permission.value)
diff --git a/ui/src/router/ROUTE_README.md b/ui/src/router/ROUTE_README.md
index 4840981d27a..a9ae21821dd 100644
--- a/ui/src/router/ROUTE_README.md
+++ b/ui/src/router/ROUTE_README.md
@@ -121,11 +121,15 @@ Chat 导航守卫（`chat/index.ts`）：
 2. 获取目标场景的认证前置配置（`AuthProfile`），与当前场景相同时复用。accessToken 无效、应用已停用或门户
    未开放导致获取失败时，进入 `chat-not-found` 并保留原地址；匿名认证失败时同样处理。
 3. 判断时只读取目标场景在本地存储中的 token，不切换 Store 的当前场景。
-4. 进入登录页或已有 token 时，调用 `auth.activate()` 切换当前场景后放行。
-5. `enable_auth` 为 false 时获取匿名 token，切换当前场景后放行。匿名认证与登录都携带该场景本地保存的
+4. `enable_auth` 为 false 时登录页无用：进入登录页会被重定向到 `redirect` 记录的原地址，没有时进入
+   当前场景首页（`portal-home` 或 `chat-home`），再按下一条匿名认证。
+5. 进入登录页或已有可用 token 时，调用 `auth.activate()` 切换当前场景后放行。`enable_auth` 为 true 时，
+   匿名认证颁发的 token（载荷 `login_type` 为 `ANNOTATION`，由 `isAnonymousToken` 判断）不可用，
+   即使本地已保存也跳转登录页；该 token 保留在本地存储，登录时携带。
+6. `enable_auth` 为 false 时获取匿名 token，切换当前场景后放行。匿名认证与登录都携带该场景本地保存的
    token，后端据此沿用同一对话用户。401 时 token 只在 Store 中清除并标记为失效，本地存储保留以便
    重新认证时携带；退出登录才从本地存储删除。
-6. 否则跳转到对应登录页（`portal-login` 或 `chat-login`），并通过 `redirect` 查询参数保留原地址。
+7. 否则跳转到对应登录页（`portal-login` 或 `chat-login`），并通过 `redirect` 查询参数保留原地址。
 
 当前场景只在放行前切换，请求层直接读取 `auth.token`，导航未完成时不会带上目标场景的 token。
 
diff --git a/ui/src/router/chat/index.ts b/ui/src/router/chat/index.ts
index 5b061da6746..a2a44481be2 100644
--- a/ui/src/router/chat/index.ts
+++ b/ui/src/router/chat/index.ts
@@ -1,6 +1,6 @@
 import { createRouter, createWebHistory, type RouteLocationNormalized } from 'vue-router'
 import { useStore } from '@/stores/chat'
-import { PORTAL_AUTH_SCOPE } from '@/stores/chat/auth'
+import { PORTAL_AUTH_SCOPE, isAnonymousToken } from '@/stores/chat/auth'
 import type { AuthProfile } from '@/api/types'
 import { chatRoutes } from './routes'
 
@@ -25,9 +25,14 @@ function isUnknownPortalPath(to: RouteLocationNormalized) {
 
 function getLoginRoute(scope: string, to: RouteLocationNormalized) {
   const query = { redirect: to.fullPath }
-  return scope === PORTAL_AUTH_SCOPE
-    ? { name: 'portal-login', query }
-    : { name: 'chat-login', params: { accessToken: scope }, query }
+  return scope === PORTAL_AUTH_SCOPE ? { name: 'portal-login', query } : { name: 'chat-login', params: { accessToken: scope }, query }
+}
+
+/** 未开启认证时登录页无用，回到 `redirect` 记录的原地址，没有时进入当前场景首页。 */
+function getLoginRedirectRoute(scope: string, to: RouteLocationNormalized) {
+  const { redirect } = to.query
+  if (typeof redirect === 'string' && redirect.startsWith('/')) return { path: redirect, replace: true }
+  return scope === PORTAL_AUTH_SCOPE ? { name: 'portal-home', replace: true } : { name: 'chat-home', params: { accessToken: scope }, replace: true }
 }
 
 /** 渲染 404 页面并保留原地址，刷新时可重新尝试。 */
@@ -51,8 +56,14 @@ chatRouter.beforeEach(async (to) => {
     return getNotFoundRoute(to)
   }
 
+  const isLoginRoute = LOGIN_ROUTE_NAMES.has(String(to.name))
+  if (isLoginRoute && !authProfile.enable_auth) return getLoginRedirectRoute(scope, to)
+
   // 判断时只读取目标场景已保存的 token，放行前再切换当前场景，避免导航未完成时请求带上目标场景的 token
-  if (LOGIN_ROUTE_NAMES.has(String(to.name)) || auth.getStoredToken(scope)) {
+  // 开启认证后，此前保存的匿名 token 不再放行，需要登录；本地存储保留，登录时携带以沿用同一对话用户
+  const storedToken = auth.getStoredToken(scope)
+  const canUseStoredToken = Boolean(storedToken) && !(authProfile.enable_auth && isAnonymousToken(storedToken))
+  if (isLoginRoute || canUseStoredToken) {
     auth.activate(scope, authProfile)
     return true
   }
diff --git a/ui/src/stores/chat/auth.ts b/ui/src/stores/chat/auth.ts
index f4d1c780716..8b83be6cc3c 100644
--- a/ui/src/stores/chat/auth.ts
+++ b/ui/src/stores/chat/auth.ts
@@ -31,6 +31,25 @@ function getSavedToken(scope: string) {
   return localStorage.getItem(getTokenStorageKey(scope)) || undefined
 }
 
+/** 匿名认证颁发的 token 的登录方式。 */
+const ANONYMOUS_LOGIN_TYPE = 'ANNOTATION'
+
+/**
+ * 判断是否为匿名认证颁发的 token。token 为 Django signing 格式「base64url(JSON):时间戳:签名」，
+ * 前端只读取载荷中的 `login_type`，不校验签名；无法解析时视为非匿名，交由后端校验。
+ */
+export function isAnonymousToken(token: string) {
+  const [payload] = token.split(':')
+  // 以 . 开头的载荷经过压缩，后端未使用
+  if (!payload || payload.startsWith('.')) return false
+  try {
+    const tokenDetails = JSON.parse(atob(payload.replace(/-/g, '+').replace(/_/g, '/'))) as { login_type?: string }
+    return tokenDetails.login_type === ANONYMOUS_LOGIN_TYPE
+  } catch {
+    return false
+  }
+}
+
 interface ChatAuthState {
   /** 当前认证场景，只在守卫放行前切换。 */
   scope: string
@@ -93,6 +112,22 @@ export const useChatAuthStore = defineStore('chat-auth', {
       })
     },
 
+    /** 使用 LDAP 账号登录当前场景，携带本地保存的 token。 */
+    ldapLogin(loginRequest: ChatLoginRequest) {
+      return ChatAuthApi.postLdapLogin(loginRequest, getAccessToken(this.scope), getSavedToken(this.scope)).then(({ token }) => {
+        this.setToken(token, this.scope)
+        return token
+      })
+    },
+
+    /** 使用钉钉扫码授权码登录当前场景。 */
+    loginWithDingTalk(code: string) {
+      return ChatAuthApi.getDingTalkCallback(code, getAccessToken(this.scope)).then(({ token }) => {
+        this.setToken(token, this.scope)
+        return token
+      })
+    },
+
     /** 退出当前场景的登录状态。 */
     logout() {
       return ChatAuthApi.postLogout().then(() => this.clearToken())
diff --git a/ui/src/views/VIEW_README.md b/ui/src/views/VIEW_README.md
index b9f007cd31e..12f5b41b47b 100644
--- a/ui/src/views/VIEW_README.md
+++ b/ui/src/views/VIEW_README.md
@@ -428,6 +428,8 @@ View 负责路由、资源与模式、图加载、保存／发布／调试编排
 - 系统操作日志的操作时间使用服务端表头排序，切换后回到第一页，保留搜索及筛选条件。
   分页和导出沿用当前排序条件，取消排序不传排序值。
 - 登录页使用 `formEl.validate` 回调和清晰的 LDAP／本地分支，不额外抽象或改写提交控制流程。
+  Admin 与 Chat 登录页共用 `login/components/LoginModePanel.vue` 及其账号／扫码登录组件，
+  组件不直接引用某个入口的 Store 或 API；接口、回调地址与登录后跳转由页面传入的 `LoginService` 提供。
 - Chat／Portal 页面以 auth token 为面板 key，token 变化重建并加载用户档案；路由认证见路由文档。
   会话装配在 conversation-panel，列表 Store 不感知 Router；门户复用 chat 装配，保留各智能体最近会话分组。
   没有当前智能体时不查询其信息／会话、禁用输入，分组加载后选首个；无可用智能体显示空态。
diff --git a/ui/src/views/chat/login/index.vue b/ui/src/views/chat/login/index.vue
index 058e87ca091..7db2690df7d 100644
--- a/ui/src/views/chat/login/index.vue
+++ b/ui/src/views/chat/login/index.vue
@@ -1,17 +1,14 @@
 <script setup lang="ts">
-import { computed, reactive, ref } from 'vue'
-import JSEncrypt from 'jsencrypt'
+import { computed } from 'vue'
 import { useRoute, useRouter, type RouteLocationRaw } from 'vue-router'
-import type { FormInstance, FormRules } from 'element-plus'
+import { v4 as uuidv4 } from 'uuid'
 import ChatAuthApi from '@/api/chat/auth'
-import type { ApplicationAuthProfileMeta } from '@/api/types'
+import { CHAT_API_BASE_PATH } from '@/api/constants'
+import { LOGIN_METHOD } from '@/api/enums'
+import type { ApplicationAuthProfileMeta, LoginConfig, LoginMethod } from '@/api/types'
 import { useStore } from '@/stores/chat'
-
-interface ChatLoginForm {
-  captcha: string
-  password: string
-  username: string
-}
+import LoginModePanel from '@/views/login/components/LoginModePanel.vue'
+import type { LoginService } from '@/views/login/types'
 
 defineOptions({ name: 'ChatLogin' })
 
@@ -25,27 +22,63 @@ const loginTitle = computed(() => {
   return (auth.authProfile?.meta as ApplicationAuthProfileMeta | undefined)?.application_name || '登录'
 })
 
-const isSubmitting = ref(false)
-const identifyCode = ref('')
-const loginFormRef = ref<FormInstance>()
-const loginForm = reactive<ChatLoginForm>({ captcha: '', password: '', username: '' })
-
-const loginRules = reactive<FormRules<ChatLoginForm>>({
-  captcha: [{ required: true, message: '请输入验证码', trigger: 'blur' }],
-  password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
-  username: [{ whitespace: true, required: true, message: '请输入用户名', trigger: 'blur' }],
+// 认证前置配置只有可用登录方式，默认登录方式依次取本地、LDAP、第一个可用方式
+const loginConfig = computed<LoginConfig>(() => {
+  const loginMethods = auth.authProfile?.login_value?.length ? auth.authProfile.login_value : [LOGIN_METHOD.LOCAL]
+  const defaultLoginMethod =
+    [LOGIN_METHOD.LOCAL, LOGIN_METHOD.LDAP].find((method) => loginMethods.includes(method)) ?? loginMethods[0] ?? LOGIN_METHOD.LOCAL
+  return { default_value: defaultLoginMethod, login_methods: loginMethods, max_attempts: auth.authProfile?.max_attempts ?? 1 }
 })
 
-// 验证码：后端按失败次数决定是否需要，无需时返回空字符串；目前仅应用场景支持
-const refreshCaptcha = () => {
-  const { accessToken } = auth
-  if (!accessToken || !loginForm.username.trim()) return
+/** 第三方认证回调后需要恢复的当前查询参数，如守卫记录的 redirect。 */
+const getRouteQueryString = () => {
+  const queryParams = new URLSearchParams()
+  Object.entries(route.query).forEach(([key, value]) => {
+    if (typeof value === 'string') queryParams.append(key, value)
+  })
+  return queryParams.toString()
+}
 
-  ChatAuthApi.getCaptcha(loginForm.username, accessToken).then(({ captcha }) => {
-    identifyCode.value = captcha
+// 回调地址携带 accessToken 和当前查询参数，后端据此回到对应应用的登录场景
+const getExternalLoginUrl = (authType: LoginMethod): Promise<string> => {
+  if (![LOGIN_METHOD.CAS, LOGIN_METHOD.OIDC, LOGIN_METHOD.OAUTH2].some((method) => method === authType)) return Promise.resolve('')
+
+  return ChatAuthApi.getExternalAuthSetting(authType).then(({ config }) => {
+    if (!config) return ''
+
+    const { accessToken } = auth
+    const queryString = getRouteQueryString()
+    const callbackUrl = `${config.redirectUrl}${accessToken ? `/${accessToken}` : ''}${queryString ? `?${queryString}` : ''}`
+    if (authType === LOGIN_METHOD.CAS) {
+      if (!config.ldpUri) return ''
+      const separator = config.ldpUri.includes('?') ? '&' : '?'
+      return `${config.ldpUri}${separator}service=${encodeURIComponent(callbackUrl)}`
+    }
+    if (authType === LOGIN_METHOD.OIDC) {
+      if (!config.authEndpoint || !config.clientId) return ''
+      const scope = config.scope || 'openid+profile+email'
+      let url = `${config.authEndpoint}?client_id=${config.clientId}&redirect_uri=${callbackUrl}&response_type=code&scope=${scope}`
+      if (config.state) url += `&state=${config.state}`
+      return url
+    }
+
+    // OAuth2 通过 state 透传 accessToken
+    if (!config.authEndpoint || !config.clientId) return ''
+    const redirectUrl = `${config.redirectUrl}${queryString ? `&${queryString}` : ''}`
+    const state = accessToken ? `${uuidv4()}_${accessToken}` : uuidv4()
+    let url = `${config.authEndpoint}?client_id=${config.clientId}&response_type=code&redirect_uri=${redirectUrl}&state=${state}`
+    if (config.scope) url += `&scope=${config.scope}`
+    return url
   })
 }
 
+const getLarkRedirectUri = () => {
+  const queryParams = new URLSearchParams(getRouteQueryString())
+  if (auth.accessToken) queryParams.set('accessToken', auth.accessToken)
+  const queryString = queryParams.toString()
+  return `${window.location.origin}${CHAT_API_BASE_PATH}/auth/lark${queryString ? `?${queryString}` : ''}`
+}
+
 // 登录成功后回到守卫记录的原地址，没有时进入当前场景首页
 const getRedirectRoute = (): RouteLocationRaw => {
   const { redirect } = route.query
@@ -54,62 +87,47 @@ const getRedirectRoute = (): RouteLocationRaw => {
   return { name: 'portal-home' }
 }
 
-const handleLogin = () => {
-  loginFormRef.value?.validate((valid) => {
-    if (!valid) return
-
-    const encryptor = new JSEncrypt()
-    encryptor.setPublicKey(auth.authProfile?.rsa_key ?? '')
-    const encryptedData = encryptor.encrypt(JSON.stringify(loginForm))
-    if (!encryptedData) return
-
-    isSubmitting.value = true
-    auth
-      .login({ encryptedData, username: loginForm.username })
-      .then(() => router.replace(getRedirectRoute()))
-      .catch(() => {
-        // 登录失败后失败次数可能达到上限，重新获取验证码
-        loginForm.captcha = ''
-        refreshCaptcha()
-      })
-      .finally(() => {
-        isSubmitting.value = false
-      })
-  })
+const loginService: LoginService = {
+  get rsaKey() {
+    return auth.authProfile?.rsa_key ?? ''
+  },
+  login: (loginRequest) => auth.login(loginRequest),
+  ldapLogin: (loginForm) => auth.ldapLogin(loginForm),
+  // 验证码：后端按失败次数决定是否需要，无需时返回空字符串；目前仅应用场景支持
+  getCaptcha: (username) => {
+    const { accessToken } = auth
+    if (!accessToken || !username.trim()) return Promise.resolve('')
+    return ChatAuthApi.getCaptcha(username, accessToken).then(({ captcha }) => captcha)
+  },
+  getExternalLoginUrl,
+  getQrCodeSources: () => ChatAuthApi.getQrCodeSources(),
+  loginWithDingTalk: (authCode) => auth.loginWithDingTalk(authCode),
+  get larkRedirectUri() {
+    return getLarkRedirectUri()
+  },
+  get wecomState() {
+    return auth.accessToken ?? ''
+  },
+  onLoginSuccess: () => router.replace(getRedirectRoute()),
 }
 </script>
 
 <template>
-  <div class="chat-login flex-center">
+  <div class="chat-login flex-center flex-col">
+    <div class="mb-6 flex-col-center w-100 max-w-full gap-4">
+      <img src="@/assets/mk-logo/MaxKB-logo.svg" alt="MaxKB" class="h-9" />
+      <h2 class="max-w-full truncate" :title="loginTitle">{{ loginTitle }}</h2>
+    </div>
     <el-card class="chat-login__card w-100">
-      <img src="@/assets/mk-logo/MaxKB-logo.svg" alt="MaxKB" class="mb-8 h-9" />
-      <h2 class="mb-6 truncate" :title="loginTitle">{{ loginTitle }}</h2>
-
-      <el-form ref="loginFormRef" :model="loginForm" :rules="loginRules" size="large" @submit.prevent="handleLogin">
-        <el-form-item prop="username">
-          <el-input v-model="loginForm.username" autocomplete="username" placeholder="请输入用户名" @blur="refreshCaptcha" />
-        </el-form-item>
-        <el-form-item prop="password">
-          <el-input v-model="loginForm.password" autocomplete="current-password" placeholder="请输入密码" show-password type="password" />
-        </el-form-item>
-        <div v-if="identifyCode" class="flex gap-2">
-          <el-form-item prop="captcha" class="flex-1">
-            <el-input v-model="loginForm.captcha" autocomplete="off" placeholder="请输入验证码" />
-          </el-form-item>
-          <img :src="identifyCode" alt="验证码" class="w-35 h-10 cursor-pointer border" @click="refreshCaptcha" />
-        </div>
-        <el-form-item>
-          <!-- 登录 -->
-          <el-button :loading="isSubmitting" native-type="submit" type="primary" class="w-full">登录</el-button>
-        </el-form-item>
-      </el-form>
+      <LoginModePanel :login-config="loginConfig" :login-service="loginService" />
     </el-card>
   </div>
 </template>
 
 <style scoped lang="scss">
 .chat-login {
-  background: linear-gradient(180deg, rgba(255, 255, 255, 0.05) 0%, rgba(var(--mk-primary-rgb) / 5%) 20%, rgba(var(--mk-primary-rgb) / 10%) 100%),
+  background:
+    linear-gradient(180deg, rgba(255, 255, 255, 0.05) 0%, rgba(var(--mk-primary-rgb) / 5%) 20%, rgba(var(--mk-primary-rgb) / 10%) 100%),
     var(--mk-N100);
   min-height: 100vh;
   padding: 16px;
@@ -118,6 +136,8 @@ const handleLogin = () => {
 .chat-login__card {
   --el-card-padding: 40px;
   border: none;
+  height: 526px;
   max-width: 100%;
+  position: relative;
 }
 </style>
diff --git a/ui/src/views/login/admin-login-service.ts b/ui/src/views/login/admin-login-service.ts
new file mode 100644
index 00000000000..c53ad1a0cf2
--- /dev/null
+++ b/ui/src/views/login/admin-login-service.ts
@@ -0,0 +1,62 @@
+/** Admin 登录页与外观设置登录预览使用的登录服务，对接 Admin 认证接口与 Store。 */
+
+import { useRouter } from 'vue-router'
+import { v4 as uuidv4 } from 'uuid'
+import ExternalLoginApi from '@/api/admin/auth/external-login'
+import LoginApi from '@/api/admin/auth/login'
+import { ADMIN_API_BASE_PATH } from '@/api/constants'
+import { LOGIN_METHOD } from '@/api/enums'
+import type { LoginMethod } from '@/api/types'
+import { useStore } from '@/stores'
+import type { LoginService } from './types'
+
+const getExternalLoginUrl = (authType: LoginMethod): Promise<string> => {
+  if (authType === LOGIN_METHOD.SAML2) return ExternalLoginApi.getSamlLoginUrl()
+
+  return ExternalLoginApi.getExternalAuthSetting(authType).then(({ config }) => {
+    if (!config) return ''
+
+    const redirectUrl = `${config.redirectUrl}`
+    if (authType === LOGIN_METHOD.CAS) {
+      if (!config.ldpUri) return ''
+      const separator = config.ldpUri.includes('?') ? '&' : '?'
+      return `${config.ldpUri}${separator}service=${encodeURIComponent(redirectUrl)}`
+    }
+    if (authType === LOGIN_METHOD.OIDC) {
+      if (!config.authEndpoint || !config.clientId) return ''
+      const scope = config.scope || 'openid+profile+email'
+      let url = `${config.authEndpoint}?client_id=${config.clientId}&redirect_uri=${redirectUrl}&response_type=code&scope=${scope}`
+      if (config.state) url += `&state=${config.state}`
+      return url
+    }
+    if (authType === LOGIN_METHOD.OAUTH2) {
+      if (!config.authEndpoint || !config.clientId) return ''
+      let url = `${config.authEndpoint}?client_id=${config.clientId}&response_type=code&redirect_uri=${redirectUrl}&state=${uuidv4()}`
+      if (config.scope) url += `&scope=${config.scope}`
+      return url
+    }
+
+    return ''
+  })
+}
+
+export function useAdminLoginService(): LoginService {
+  const router = useRouter()
+  const { auth } = useStore()
+
+  return {
+    get rsaKey() {
+      return auth.baseProfile?.rsa ?? ''
+    },
+    login: (loginRequest) => auth.asyncLogin(loginRequest),
+    ldapLogin: (loginForm) => auth.asyncLdapLogin(loginForm),
+    getCaptcha: (username) => LoginApi.getCaptcha(username).then(({ captcha }) => captcha),
+    getExternalLoginUrl,
+    getQrCodeSources: () => ExternalLoginApi.getQrCodeSources(),
+    loginWithDingTalk: (authCode) => auth.asyncLoginWithDingTalk(authCode),
+    larkRedirectUri: `${window.location.origin}${ADMIN_API_BASE_PATH}/lark`,
+    wecomState: 'fit2cloud-wecom-qr',
+    onLoginSuccess: () => router.push({ name: 'workspace-home', params: { workspaceId: 'default' } }),
+    forgotPassword: () => void router.push({ name: 'forgot-password' }),
+  }
+}
diff --git a/ui/src/views/login/components/LoginModePanel.vue b/ui/src/views/login/components/LoginModePanel.vue
new file mode 100644
index 00000000000..a1e427bb71b
--- /dev/null
+++ b/ui/src/views/login/components/LoginModePanel.vue
@@ -0,0 +1,79 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+import { LOGIN_METHOD } from '@/api/enums'
+import type { LoginConfig, QrCodeProvider } from '@/api/types'
+import AccountLogin from '../modes/AccountLogin.vue'
+import QrCodeLogin from '../modes/QrCodeLogin.vue'
+import { qrCodeLoginMethods } from '../constants'
+import type { LoginService } from '../types'
+
+defineOptions({ name: 'LoginModePanel' })
+
+// 按登录配置拆分账号登录与扫码登录，默认登录方式决定初始模式；配置加载完成后再挂载
+const props = defineProps<{ loginConfig: LoginConfig; loginService: LoginService }>()
+
+const isQrCodeMethod = (method: string) => qrCodeLoginMethods.includes(method as QrCodeProvider)
+
+const loginMode = ref<'account' | 'qr-code'>(isQrCodeMethod(props.loginConfig.default_value) ? 'qr-code' : 'account')
+
+const qrCodeProviders = computed(() => (props.loginConfig.login_methods ?? []).filter((method): method is QrCodeProvider => isQrCodeMethod(method)))
+const accountLoginMethods = computed(() => (props.loginConfig.login_methods ?? []).filter((method) => !isQrCodeMethod(method)))
+const accountLoginConfig = computed<LoginConfig>(() => ({
+  ...props.loginConfig,
+  default_value: isQrCodeMethod(props.loginConfig.default_value)
+    ? (accountLoginMethods.value[0] ?? LOGIN_METHOD.LOCAL)
+    : props.loginConfig.default_value,
+  login_methods: accountLoginMethods.value,
+}))
+const qrCodeLoginConfig = computed<LoginConfig>(() => ({
+  ...props.loginConfig,
+  default_value: isQrCodeMethod(props.loginConfig.default_value) ? props.loginConfig.default_value : (qrCodeProviders.value[0] ?? LOGIN_METHOD.WECOM),
+  login_methods: qrCodeProviders.value,
+}))
+const showLoginModeSwitch = computed(() => accountLoginMethods.value.length > 0 && qrCodeProviders.value.length > 0)
+</script>
+
+<template>
+  <!-- 切换扫码登录或账号登录 -->
+  <el-button
+    v-if="showLoginModeSwitch"
+    type="primary"
+    text
+    class="login-mode-switch"
+    @click="loginMode = loginMode === 'account' ? 'qr-code' : 'account'"
+  >
+    <MkIcon :name="loginMode === 'account' ? 'icon_qr_outlined' : 'icon_pc_outlined'" :size="48" />
+  </el-button>
+
+  <AccountLogin v-if="loginMode === 'account'" :login-config="accountLoginConfig" :login-service="loginService" />
+  <QrCodeLogin v-else :login-config="qrCodeLoginConfig" :login-service="loginService" />
+</template>
+
+<style scoped lang="scss">
+.login-mode-switch {
+  border-radius: 0 12px 0 0;
+  height: 70px;
+  margin: 0;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  right: 0;
+  top: 0;
+  width: 70px;
+  z-index: 1;
+  .el-icon {
+    top: -6px;
+    right: -6px;
+  }
+
+  &::after {
+    background: var(--el-color-white);
+    clip-path: polygon(0 0, 0 100%, 100% 100%);
+    content: '';
+    inset: 0;
+    opacity: 1;
+    position: absolute;
+    transition: opacity 0.2s;
+  }
+}
+</style>
diff --git a/ui/src/views/login/index.vue b/ui/src/views/login/index.vue
index b0647b5347b..24fd97882df 100644
--- a/ui/src/views/login/index.vue
+++ b/ui/src/views/login/index.vue
@@ -1,41 +1,18 @@
 <script setup lang="ts">
-import { computed, onBeforeMount, ref } from 'vue'
+import { onBeforeMount, ref } from 'vue'
 import BaseInfoApi from '@/api/admin/auth/base-info.ts'
 import { useStore } from '@/stores'
 import { LOGIN_METHOD } from '@/api/enums'
-import type { LoginConfig, QrCodeProvider } from '@/api/types'
+import type { LoginConfig } from '@/api/types'
 import LoginLayout from './components/LoginLayout.vue'
-import AccountLogin from './modes/AccountLogin.vue'
-import QrCodeLogin from './modes/QrCodeLogin.vue'
-import { qrCodeLoginMethods } from './constants'
+import LoginModePanel from './components/LoginModePanel.vue'
+import { useAdminLoginService } from './admin-login-service'
 
 const { auth } = useStore()
+const loginService = useAdminLoginService()
 
 const isLoading = ref(true)
 const loginConfig = ref<LoginConfig>({ default_value: LOGIN_METHOD.LOCAL, login_methods: [LOGIN_METHOD.LOCAL], max_attempts: 1 })
-const loginMode = ref<'account' | 'qr-code'>('account')
-
-const qrCodeProviders = computed(() =>
-  (loginConfig.value.login_methods ?? []).filter((method): method is QrCodeProvider => qrCodeLoginMethods.includes(method as QrCodeProvider)),
-)
-const accountLoginMethods = computed(() =>
-  (loginConfig.value.login_methods ?? []).filter((method) => !qrCodeLoginMethods.includes(method as QrCodeProvider)),
-)
-const accountLoginConfig = computed<LoginConfig>(() => ({
-  ...loginConfig.value,
-  default_value: qrCodeLoginMethods.includes(loginConfig.value.default_value as QrCodeProvider)
-    ? (accountLoginMethods.value[0] ?? LOGIN_METHOD.LOCAL)
-    : loginConfig.value.default_value,
-  login_methods: accountLoginMethods.value,
-}))
-const qrCodeLoginConfig = computed<LoginConfig>(() => ({
-  ...loginConfig.value,
-  default_value: qrCodeLoginMethods.includes(loginConfig.value.default_value as QrCodeProvider)
-    ? loginConfig.value.default_value
-    : (qrCodeProviders.value[0] ?? LOGIN_METHOD.WECOM),
-  login_methods: qrCodeProviders.value,
-}))
-const showLoginModeSwitch = computed(() => accountLoginMethods.value.length > 0 && qrCodeProviders.value.length > 0)
 
 onBeforeMount(() => {
   // 登录配置加载完成后，按默认登录方式挂载对应模式。
@@ -54,9 +31,6 @@ onBeforeMount(() => {
       }
       loginConfig.value = { max_attempts: 1, default_value: LOGIN_METHOD.LOCAL, login_methods: [LOGIN_METHOD.LOCAL] }
     })
-    .then(() => {
-      loginMode.value = qrCodeLoginMethods.includes(loginConfig.value.default_value as QrCodeProvider) ? 'qr-code' : 'account'
-    })
     .finally(() => {
       isLoading.value = false
     })
@@ -65,47 +39,6 @@ onBeforeMount(() => {
 
 <template>
   <LoginLayout v-if="!isLoading">
-    <!-- 切换扫码登录或账号登录 -->
-    <el-button
-      v-if="showLoginModeSwitch"
-      type="primary"
-      text
-      class="login-mode-switch"
-      @click="loginMode = loginMode === 'account' ? 'qr-code' : 'account'"
-    >
-      <MkIcon :name="loginMode === 'account' ? 'icon_qr_outlined' : 'icon_pc_outlined'" :size="48" />
-    </el-button>
-
-    <AccountLogin v-if="loginMode === 'account'" :login-config="accountLoginConfig" />
-    <QrCodeLogin v-else :login-config="qrCodeLoginConfig" />
+    <LoginModePanel :login-config="loginConfig" :login-service="loginService" />
   </LoginLayout>
 </template>
-
-<style scoped lang="scss">
-.login-mode-switch {
-  border-radius: 0 12px 0 0;
-  height: 70px;
-  margin: 0;
-  overflow: hidden;
-  padding: 0;
-  position: absolute;
-  right: 0;
-  top: 0;
-  width: 70px;
-  z-index: 1;
-  .el-icon {
-    top: -6px;
-    right: -6px;
-  }
-
-  &::after {
-    background: var(--el-color-white);
-    clip-path: polygon(0 0, 0 100%, 100% 100%);
-    content: '';
-    inset: 0;
-    opacity: 1;
-    position: absolute;
-    transition: opacity 0.2s;
-  }
-}
-</style>
diff --git a/ui/src/views/login/modes/AccountLogin.vue b/ui/src/views/login/modes/AccountLogin.vue
index 5f9a9857689..5602f8c2399 100644
--- a/ui/src/views/login/modes/AccountLogin.vue
+++ b/ui/src/views/login/modes/AccountLogin.vue
@@ -1,29 +1,18 @@
 <script setup lang="ts">
 import { computed, onMounted, reactive, ref } from 'vue'
 import JSEncrypt from 'jsencrypt'
-import { useRoute, useRouter } from 'vue-router'
+import { useRoute } from 'vue-router'
 import type { FormInstance, FormRules } from 'element-plus'
-import ExternalLoginApi from '@/api/admin/auth/external-login'
-import LoginApi from '@/api/admin/auth/login'
 import { LOGIN_METHOD_LABELS } from '@/constants'
-import { useStore } from '@/stores'
 import { LOGIN_METHOD } from '@/api/enums'
 import type { LoginConfig, LoginMethod } from '@/api/types'
-import { v4 as uuidv4 } from 'uuid'
-
-interface AccountLoginForm {
-  captcha: string
-  password: string
-  username: string
-}
+import type { AccountLoginForm, LoginService } from '../types'
 
 defineOptions({ name: 'AccountLogin' })
 
-const props = withDefaults(defineProps<{ loginConfig?: LoginConfig; preview?: boolean }>(), { preview: false })
+const props = withDefaults(defineProps<{ loginConfig?: LoginConfig; loginService: LoginService; preview?: boolean }>(), { preview: false })
 
 const route = useRoute()
-const router = useRouter()
-const { auth } = useStore()
 const isSubmitting = ref(false)
 const identifyCode = ref('')
 const loginMethod = ref<LoginMethod>(props.loginConfig?.default_value ?? LOGIN_METHOD.LOCAL)
@@ -57,28 +46,24 @@ const handleLogin = async () => {
     if (valid) {
       isSubmitting.value = true
       if (loginMethod.value === LOGIN_METHOD.LDAP) {
-        auth
-          .asyncLdapLogin(accountLoginForm)
-          .then(() => {
-            router.push({ name: 'workspace-home', params: { workspaceId: 'default' } })
-          })
+        props.loginService
+          .ldapLogin(accountLoginForm)
+          .then(() => props.loginService.onLoginSuccess())
           .catch(() => {
             isSubmitting.value = false
           })
       } else {
         const encryptor = new JSEncrypt()
-        encryptor.setPublicKey(auth.baseProfile?.rsa ?? '')
+        encryptor.setPublicKey(props.loginService.rsaKey)
         const encryptedData = encryptor.encrypt(JSON.stringify(accountLoginForm))
         if (!encryptedData) {
           isSubmitting.value = false
           return
         }
 
-        auth
-          .asyncLogin({ encryptedData, username: accountLoginForm.username })
-          .then(() => {
-            router.push({ name: 'workspace-home', params: { workspaceId: 'default' } })
-          })
+        props.loginService
+          .login({ encryptedData, username: accountLoginForm.username })
+          .then(() => props.loginService.onLoginSuccess())
           .catch(() => {
             isSubmitting.value = false
             refreshCaptcha()
@@ -91,8 +76,8 @@ const handleLogin = async () => {
 const refreshCaptcha = () => {
   if (props.preview) return
   if (loginMethod.value === LOGIN_METHOD.LDAP) return
-  LoginApi.getCaptcha(accountLoginForm.username).then((res) => {
-    identifyCode.value = res.captcha
+  props.loginService.getCaptcha(accountLoginForm.username).then((captcha) => {
+    identifyCode.value = captcha
   })
 }
 
@@ -109,41 +94,11 @@ const selectLoginMethod = (method: LoginMethod) => {
 }
 
 const redirectExternalLogin = async (method: LoginMethod) => {
-  const redirectUrl = await getExternalLoginUrl(method)
+  const redirectUrl = await props.loginService.getExternalLoginUrl(method)
   if (!redirectUrl) return
   window.location.href = redirectUrl
 }
 
-const getExternalLoginUrl = (authType: LoginMethod): Promise<string> => {
-  if (authType === LOGIN_METHOD.SAML2) return ExternalLoginApi.getSamlLoginUrl()
-
-  return ExternalLoginApi.getExternalAuthSetting(authType).then(({ config }) => {
-    if (!config) return ''
-
-    const redirectUrl = `${config.redirectUrl}`
-    if (authType === LOGIN_METHOD.CAS) {
-      if (!config.ldpUri) return ''
-      const separator = config.ldpUri.includes('?') ? '&' : '?'
-      return `${config.ldpUri}${separator}service=${encodeURIComponent(redirectUrl)}`
-    }
-    if (authType === LOGIN_METHOD.OIDC) {
-      if (!config.authEndpoint || !config.clientId) return ''
-      const scope = config.scope || 'openid+profile+email'
-      let url = `${config.authEndpoint}?client_id=${config.clientId}&redirect_uri=${redirectUrl}&response_type=code&scope=${scope}`
-      if (config.state) url += `&state=${config.state}`
-      return url
-    }
-    if (authType === LOGIN_METHOD.OAUTH2) {
-      if (!config.authEndpoint || !config.clientId) return ''
-      let url = `${config.authEndpoint}?client_id=${config.clientId}&response_type=code&redirect_uri=${redirectUrl}&state=${uuidv4()}`
-      if (config.scope) url += `&scope=${config.scope}`
-      return url
-    }
-
-    return ''
-  })
-}
-
 onMounted(() => {
   if (props.preview) return
   if (route.query.login_mode !== 'manual') {
@@ -202,7 +157,10 @@ onMounted(() => {
           <el-button :loading="isSubmitting" native-type="submit" type="primary" class="w-full">登录</el-button>
         </el-form-item>
       </el-form>
-      <el-button size="default" class="mt-3" link type="primary" @click="router.push({ name: 'forgot-password' })">忘记密码？</el-button>
+      <!-- 忘记密码 -->
+      <el-button v-if="loginService.forgotPassword" size="default" class="mt-3" link type="primary" @click="loginService.forgotPassword()">
+        忘记密码？
+      </el-button>
     </div>
     <div v-if="accountLoginMethods.length" class="third-login flex-col-center gap-4">
       <el-divider>其他登录方式</el-divider>
diff --git a/ui/src/views/login/modes/QrCodeLogin.vue b/ui/src/views/login/modes/QrCodeLogin.vue
index 58ec4fb3f3c..30ddb63804e 100644
--- a/ui/src/views/login/modes/QrCodeLogin.vue
+++ b/ui/src/views/login/modes/QrCodeLogin.vue
@@ -1,16 +1,16 @@
 <script setup lang="ts">
 import { computed, onMounted, ref } from 'vue'
-import ExternalLoginApi from '@/api/admin/auth/external-login'
 import type { LoginConfig, QrCodeConfig, QrCodeProvider } from '@/api/types'
 import { LOGIN_METHOD } from '@/api/enums'
 import { LOGIN_METHOD_LABELS } from '@/constants'
 import DingTalkQrCode from '../scanComponents/dingtalkQrCode.vue'
 import LarkQrCode from '../scanComponents/larkQrCode.vue'
 import WecomQrCode from '../scanComponents/wecomQrCode.vue'
+import type { LoginService } from '../types'
 
 defineOptions({ name: 'QrCodeLogin' })
 
-const props = defineProps<{ loginConfig: LoginConfig }>()
+const props = defineProps<{ loginConfig: LoginConfig; loginService: LoginService }>()
 const qrCodeLoginMethods = computed(() => props.loginConfig.login_methods ?? [])
 
 const qrCodeConfigs = ref<Partial<Record<QrCodeProvider, QrCodeConfig>>>({})
@@ -22,7 +22,7 @@ const currentConfig = computed(() => qrCodeConfigs.value[qrCodeProvider.value])
 const currentProviderComponent = computed(() => providerComponents[qrCodeProvider.value])
 
 onMounted(() => {
-  ExternalLoginApi.getQrCodeSources().then((sources) => {
+  props.loginService.getQrCodeSources().then((sources) => {
     qrCodeConfigs.value = Object.fromEntries(sources.map(({ auth_type: provider, config }) => [provider, config]))
   })
 })
@@ -33,7 +33,7 @@ onMounted(() => {
     <el-tabs v-model="qrCodeProvider" class="provider-tabs">
       <el-tab-pane v-for="provider in qrCodeLoginMethods" :key="provider" :label="LOGIN_METHOD_LABELS[provider]" :name="provider" />
     </el-tabs>
-    <component :is="currentProviderComponent" v-if="currentConfig" :config="currentConfig" />
+    <component :is="currentProviderComponent" v-if="currentConfig" :config="currentConfig" :login-service="loginService" />
   </div>
 </template>
 
diff --git a/ui/src/views/login/scanComponents/dingtalkQrCode.vue b/ui/src/views/login/scanComponents/dingtalkQrCode.vue
index fd110b957c6..8eda3b450c7 100644
--- a/ui/src/views/login/scanComponents/dingtalkQrCode.vue
+++ b/ui/src/views/login/scanComponents/dingtalkQrCode.vue
@@ -1,16 +1,13 @@
 <script setup lang="ts">
 import { nextTick, watch } from 'vue'
-import { useRouter } from 'vue-router'
-import { useStore } from '@/stores'
 import type { QrCodeConfig } from '@/api/types'
+import type { LoginService } from '../types'
 import { MsgError } from '@/utils/message'
 import { loadLoginScript } from '@/utils/script-loader'
 
 defineOptions({ name: 'DingTalkQrCode' })
 
-const props = defineProps<{ config: QrCodeConfig }>()
-const router = useRouter()
-const { auth } = useStore()
+const props = defineProps<{ config: QrCodeConfig; loginService: LoginService }>()
 
 const initialize = async () => {
   if (!props.config.app_key || !props.config.corp_id) return
@@ -29,8 +26,8 @@ const initialize = async () => {
       state: 'fit2cloud-ding-qr',
     },
     async ({ authCode }) => {
-      await auth.asyncLoginWithDingTalk(authCode)
-      await router.push({ name: 'workspace-home', params: { workspaceId: 'default' } })
+      await props.loginService.loginWithDingTalk(authCode)
+      await props.loginService.onLoginSuccess()
     },
     MsgError,
   )
diff --git a/ui/src/views/login/scanComponents/larkQrCode.vue b/ui/src/views/login/scanComponents/larkQrCode.vue
index bfcd0f66501..a3ab5b447a6 100644
--- a/ui/src/views/login/scanComponents/larkQrCode.vue
+++ b/ui/src/views/login/scanComponents/larkQrCode.vue
@@ -1,12 +1,13 @@
 <script setup lang="ts">
 import { nextTick, onBeforeUnmount, watch } from 'vue'
 import type { QrCodeConfig } from '@/api/types'
+import type { LoginService } from '../types'
 import { MsgError } from '@/utils/message'
 import { loadLoginScript } from '@/utils/script-loader'
 
 defineOptions({ name: 'LarkQrCode' })
 
-const props = defineProps<{ config: QrCodeConfig }>()
+const props = defineProps<{ config: QrCodeConfig; loginService: LoginService }>()
 let messageHandler: ((event: MessageEvent) => void) | undefined
 
 const initialize = async () => {
@@ -15,11 +16,10 @@ const initialize = async () => {
   await nextTick()
   if (!window.QRLogin) throw new Error('飞书扫码 SDK 加载失败')
 
-  const adminPrefix = window.MaxKB?.prefix ?? import.meta.env.VITE_BASE_PATH ?? '/admin/'
   const authorizeUrl = new URL('https://passport.feishu.cn/suite/passport/oauth/authorize')
   authorizeUrl.search = new URLSearchParams({
     client_id: props.config.app_key,
-    redirect_uri: `${window.location.origin}${adminPrefix.replace(/\/$/, '')}/api/lark`,
+    redirect_uri: props.loginService.larkRedirectUri,
     response_type: 'code',
     state: 'fit2cloud-lark-qr',
   }).toString()
diff --git a/ui/src/views/login/scanComponents/wecomQrCode.vue b/ui/src/views/login/scanComponents/wecomQrCode.vue
index 5732d2ec230..0c60da51b01 100644
--- a/ui/src/views/login/scanComponents/wecomQrCode.vue
+++ b/ui/src/views/login/scanComponents/wecomQrCode.vue
@@ -1,10 +1,11 @@
 <script setup lang="ts">
 import { computed } from 'vue'
 import type { QrCodeConfig } from '@/api/types'
+import type { LoginService } from '../types'
 
 defineOptions({ name: 'WecomQrCode' })
 
-const props = defineProps<{ config: QrCodeConfig }>()
+const props = defineProps<{ config: QrCodeConfig; loginService: LoginService }>()
 
 const iframeUrl = computed(() => {
   if (!props.config.qr_url || !props.config.callback_url) return ''
@@ -15,7 +16,7 @@ const iframeUrl = computed(() => {
     login_type: 'CorpApp',
     panel_size: 'small',
     redirect_uri: props.config.callback_url,
-    state: 'fit2cloud-wecom-qr',
+    state: props.loginService.wecomState,
   })
   return `${props.config.qr_url}?${params}`
 })
diff --git a/ui/src/views/login/types.ts b/ui/src/views/login/types.ts
new file mode 100644
index 00000000000..dd3b56c1b02
--- /dev/null
+++ b/ui/src/views/login/types.ts
@@ -0,0 +1,31 @@
+/** 账号登录与扫码登录组件在 Admin、Chat 入口间的差异，由登录页面通过 LoginService 提供。 */
+
+import type { LoginMethod, QrCodeSource } from '@/api/types'
+
+export interface AccountLoginForm {
+  captcha: string
+  password: string
+  username: string
+}
+
+export interface LoginService {
+  /** 本地账号登录使用的 RSA 公钥。 */
+  rsaKey: string
+  /** 本地账号登录，表单已加密。 */
+  login: (loginRequest: { encryptedData: string; username: string }) => Promise<unknown>
+  ldapLogin: (loginForm: AccountLoginForm) => Promise<unknown>
+  /** 获取本地账号登录验证码；无需验证码时返回空字符串。 */
+  getCaptcha: (username: string) => Promise<string>
+  /** 生成 CAS、OIDC、OAuth2、SAML2 等第三方认证的跳转地址；配置不完整时返回空字符串。 */
+  getExternalLoginUrl: (method: LoginMethod) => Promise<string>
+  getQrCodeSources: () => Promise<QrCodeSource[]>
+  loginWithDingTalk: (authCode: string) => Promise<unknown>
+  /** 飞书扫码授权后的后端回调地址。 */
+  larkRedirectUri: string
+  /** 企业微信扫码透传给后端回调的 state。 */
+  wecomState: string
+  /** 登录成功后的跳转，账号与扫码登录共用。 */
+  onLoginSuccess: () => unknown
+  /** 不提供时不显示“忘记密码”入口。 */
+  forgotPassword?: () => void
+}
diff --git a/ui/src/views/system/settings/theme/components/LoginPreview.vue b/ui/src/views/system/settings/theme/components/LoginPreview.vue
index 7a2448e64e2..3e39caa5c51 100644
--- a/ui/src/views/system/settings/theme/components/LoginPreview.vue
+++ b/ui/src/views/system/settings/theme/components/LoginPreview.vue
@@ -7,6 +7,7 @@ import LogoIcon from '@/components/mk-logo/LogoIcon.vue'
 import { getThemeImg } from '@/constants/theme'
 import LoginLayout from '@/views/login/components/LoginLayout.vue'
 import AccountLogin from '@/views/login/modes/AccountLogin.vue'
+import { useAdminLoginService } from '@/views/login/admin-login-service'
 
 type ThemeImageValue = File | string
 type ThemePreviewData = Omit<ThemeInfo, 'icon' | 'loginImage' | 'loginLogo'> & {
@@ -18,6 +19,7 @@ type ThemePreviewData = Omit<ThemeInfo, 'icon' | 'loginImage' | 'loginLogo'> & {
 defineOptions({ name: 'ThemeLoginPreview' })
 
 const props = defineProps<{ data: ThemePreviewData }>()
+const loginService = useAdminLoginService()
 const previewLoginConfig: LoginConfig = {
   default_value: LOGIN_METHOD.LOCAL,
   login_methods: [LOGIN_METHOD.LOCAL, LOGIN_METHOD.LDAP, LOGIN_METHOD.CAS, LOGIN_METHOD.OAUTH2, LOGIN_METHOD.OIDC],
@@ -83,7 +85,7 @@ const previewThemeInfo = computed<ThemeInfo>(() => ({
     <div class="preview-page relative overflow-hidden">
       <div class="preview-scale" inert>
         <LoginLayout preview :theme-info="previewThemeInfo">
-          <AccountLogin preview :login-config="previewLoginConfig" />
+          <AccountLogin preview :login-config="previewLoginConfig" :login-service="loginService" />
         </LoginLayout>
       </div>
       <div class="preview-mask absolute inset-0" aria-hidden="true"></div>