feat: add login settings management and captcha display logic

2025-12-26 01:33:05 +00:00 · 2025-09-16 18:24:40 +08:00 · 2025-09-16 18:24:40 +08:00 · ceb601d74a
parent 6c2b2f6c17
commit ceb601d74a
12 changed files with 409 additions and 109 deletions
--- a/ui/src/api/system-settings/auth-setting.ts
+++ b/ui/src/api/system-settings/auth-setting.ts
@ -30,9 +30,31 @@ const putAuthSetting: (auth_type: string, data: any, loading?: Ref<boolean>) =>
 ) => {
  return put(`${prefix}/${auth_type}/info`, data, undefined, loading)
 }
+/**
+ * 登录设置
+ */
+const putLoginSetting: (data: any, loading?: Ref<boolean>) => Promise<Result<any>> = (
+  data,
+  loading
+) => {
+  return put(`${prefix}/setting`, data, undefined, loading)
+}
+/**
+ * 获取登录设置
+ */
+const getLoginSetting: (loading?: Ref<boolean>) => Promise<Result<any>> = (loading) => {
+  return get(`${prefix}/setting`, undefined, loading)
+}
+
+const getLoginAuthSetting: (loading?: Ref<boolean>) => Promise<Result<any>> = (loading) => {
+  return get(`login/auth/setting`, undefined, loading)
+}

 export default {
  getAuthSetting,
  postAuthSetting,
-  putAuthSetting
+  putAuthSetting,
+  putLoginSetting,
+  getLoginSetting,
+  getLoginAuthSetting
 }
--- a/ui/src/api/user/login.ts
+++ b/ui/src/api/user/login.ts
@ -38,8 +38,8 @@ const logout: (loading?: Ref<boolean>) => Promise<Result<boolean>> = (loading) =
 * 获取验证码
 * @param loading 接口加载器
 */
-const getCaptcha: (loading?: Ref<boolean>) => Promise<Result<any>> = (loading) => {
-  return get('/user/captcha', undefined, loading)
+const getCaptcha: (username?: string, loading?: Ref<boolean>) => Promise<Result<any>> = (username, loading) => {
+  return get('/user/captcha', {username}, loading)
 }

 /**
--- a/ui/src/locales/lang/en-US/views/system.ts
+++ b/ui/src/locales/lang/en-US/views/system.ts
@ -130,4 +130,9 @@ export default {
    type: 'Type',
    management: 'management',
  },
+    default_login: 'Default Login Method',
+  display_code: 'Display verification code when login fails',
+  display_codeTip: 'When the value is -1, the verification code is not displayed',
+  time: 'Times',
+  setting: 'Login Setting',
 }
--- a/ui/src/locales/lang/zh-CN/views/system.ts
+++ b/ui/src/locales/lang/zh-CN/views/system.ts
@ -131,4 +131,9 @@ export default {
    type: '类型',
    management: '管理',
  },
+  default_login: '默认登录方式',
+  display_code: '登录失败显示验证码',
+  display_codeTip: '值为-1时，不显示验证码',
+  time: '次',
+  setting: '登录设置',
 }
--- a/ui/src/locales/lang/zh-Hant/views/system.ts
+++ b/ui/src/locales/lang/zh-Hant/views/system.ts
@ -130,4 +130,9 @@ export default {
    type: '類型',
    management: '管理',
  },
+    default_login: '預設登入方式',
+  display_code: '登入失敗顯示驗證碼',
+  display_codeTip: '值為-1時，不顯示驗證碼',
+  time: '次',
+  setting: '登录設置',
 }
--- a/ui/src/views/application-overview/xpack-component/XPackLimitDrawer.vue
+++ b/ui/src/views/application-overview/xpack-component/XPackLimitDrawer.vue
@ -23,8 +23,8 @@
          step-strictly
        />
        <span class="ml-4">{{
-          $t('views.applicationOverview.appInfo.LimitDialog.timesDays')
-        }}</span>
+            $t('views.applicationOverview.appInfo.LimitDialog.timesDays')
+          }}</span>
      </el-form-item>
      <!--     身份验证 -->
      <el-form-item
@ -74,7 +74,7 @@
                    style="margin: 0 4px 0 0 !important"
                  >
                    <el-icon>
-                      <RefreshRight />
+                      <RefreshRight/>
                    </el-icon>
                  </el-button>
                </el-tooltip>
@ -111,10 +111,32 @@
          >
            <el-checkbox-group v-model="form.authentication_value.login_value">
              <template v-for="t in auth_list" :key="t.value">
-                <el-checkbox :label="t.label" :value="t.value" />
+                <el-checkbox :label="t.label" :value="t.value"/>
              </template>
            </el-checkbox-group>
          </el-form-item>
+          <el-form-item
+            :label="$t('views.system.display_code')"
+            :rules="[
+              {
+                required: true,
+                message: $t('views.applicationOverview.appInfo.LimitDialog.displayCodeRequired'),
+                trigger: 'change',
+              },
+            ]"
+            prop="authentication_value.max_attempts"
+          >
+            <el-input-number
+              v-model="form.authentication_value.max_attempts"
+              :min="-1"
+              :max="10"
+              :step="1"
+              controls-position="right"
+            />
+            <span style="margin-left: 8px; color: #909399; font-size: 12px;">
+      {{ $t('views.system.display_codeTip') }}
+    </span>
+          </el-form-item>
        </el-card>
      </el-radio-group>

@ -144,18 +166,18 @@
  </el-drawer>
 </template>
 <script setup lang="ts">
-import { ref, watch, computed } from 'vue'
-import { useRoute, useRouter } from 'vue-router'
-import type { FormInstance, FormRules } from 'element-plus'
-import { MsgSuccess } from '@/utils/message'
-import { t } from '@/locales'
-import { copyClick } from '@/utils/clipboard'
-import { loadSharedApi } from '@/utils/dynamics-api/shared-api'
+import {ref, watch, computed} from 'vue'
+import {useRoute, useRouter} from 'vue-router'
+import type {FormInstance, FormRules} from 'element-plus'
+import {MsgSuccess} from '@/utils/message'
+import {t} from '@/locales'
+import {copyClick} from '@/utils/clipboard'
+import {loadSharedApi} from '@/utils/dynamics-api/shared-api'

 const router = useRouter()
 const route = useRoute()
 const {
-  params: { id },
+  params: {id},
 } = route

 const apiType = computed(() => {
@ -174,6 +196,7 @@ const form = ref<any>({
  white_list: '',
  authentication_value: {
    type: 'password',
+    max_attempts: 1,
  },
  authentication: false,
 })
@ -197,6 +220,9 @@ const open = (data: any) => {
  form.value.authentication_value = data.authentication_value || {
    type: 'password',
  }
+  if (!form.value.authentication_value.max_attempts) {
+    form.value.authentication_value.max_attempts = 1
+  }
  if (
    form.value.authentication_value.type === 'password' &&
    !form.value.authentication_value.password_value
@ -205,7 +231,7 @@ const open = (data: any) => {
  }
  form.value.authentication = data.authentication
  dialogVisible.value = true
-  loadSharedApi({ type: 'application', systemType: apiType.value })
+  loadSharedApi({type: 'application', systemType: apiType.value})
    .getChatUserAuthType()
    .then((ok: any) => {
      auth_list.value = ok.data
@ -223,7 +249,7 @@ const submit = async (formEl: FormInstance | undefined) => {
        authentication: form.value.authentication,
        authentication_value: form.value.authentication_value,
      }
-      loadSharedApi({ type: 'application', systemType: apiType.value })
+      loadSharedApi({type: 'application', systemType: apiType.value})
        .putAccessToken(id as string, obj, loading)
        .then(() => {
          emit('refresh')
@ -256,7 +282,7 @@ function firstGeneration() {
  }
 }

-defineExpose({ open })
+defineExpose({open})
 </script>
 <style lang="scss" scoped>
 .authentication-append-input {
--- a/ui/src/views/chat/user-login/index.vue
+++ b/ui/src/views/chat/user-login/index.vue
@ -229,7 +229,7 @@ const rules = ref<FormRules<LoginRequest>>({
  ],
  captcha: [
    {
-      required: true,
+      required: false,
      message: t('views.login.loginForm.captcha.requiredMessage'),
      trigger: 'blur',
    },
@ -258,8 +258,8 @@ const loginHandle = () => {
  })
 }

-function makeCode() {
-  loginApi.getCaptcha().then((res: any) => {
+function makeCode(userrname?: string) {
+  loginApi.getCaptcha(userrname).then((res: any) => {
    identifyCode.value = res.data.captcha
  })
 }
--- a/ui/src/views/login/index.vue
+++ b/ui/src/views/login/index.vue
@ -16,6 +16,7 @@
                size="large"
                class="input-item"
                v-model="loginForm.username"
+                @blur="handleUsernameBlur(loginForm.username)"
                :placeholder="$t('views.login.loginForm.username.placeholder')"
              >
              </el-input>
@ -34,7 +35,7 @@
              </el-input>
            </el-form-item>
          </div>
-          <div class="mb-24" v-if="loginMode !== 'LDAP'">
+          <div class="mb-24" v-if="loginMode !== 'LDAP' && showCaptcha">
            <el-form-item prop="captcha">
              <div class="flex-between w-full">
                <el-input
@ -50,7 +51,7 @@
                  alt=""
                  height="38"
                  class="ml-8 cursor border border-r-6"
-                  @click="makeCode"
+                  @click="makeCode(loginForm.username)"
                />
              </div>
            </el-form-item>
@ -79,7 +80,7 @@
        </div>
      </div>
      <div v-if="showQrCodeTab">
-        <QrCodeTab :tabs="orgOptions" />
+        <QrCodeTab :tabs="orgOptions" :default-tab="defaultQrTab"/>
      </div>
      <div class="login-gradient-divider lighter mt-24" v-if="modeList.length > 1">
        <span>{{ $t('views.login.moreMethod') }}</span>
@ -98,7 +99,7 @@
                'font-size': item === 'OAUTH2' ? '8px' : '10px',
                color: theme.themeInfo?.theme,
              }"
-              >{{ item }}</span
+            >{{ item }}</span
            >
          </el-button>
          <el-button
@ -108,7 +109,7 @@
            class="login-button-circle color-secondary"
            @click="changeMode('QR_CODE')"
          >
-            <img src="@/assets/icon_qr_outlined.svg" width="25px" />
+            <img src="@/assets/icon_qr_outlined.svg" width="25px"/>
          </el-button>
          <el-button
            v-if="item === '' && loginMode !== ''"
@ -125,30 +126,31 @@
  </login-layout>
 </template>
 <script setup lang="ts">
-import { onMounted, ref, onBeforeMount, computed } from 'vue'
-import { useRoute, useRouter } from 'vue-router'
-import type { FormInstance, FormRules } from 'element-plus'
-import type { LoginRequest } from '@/api/type/login'
+import {onMounted, ref, onBeforeMount, computed} from 'vue'
+import {useRoute, useRouter} from 'vue-router'
+import type {FormInstance, FormRules} from 'element-plus'
+import type {LoginRequest} from '@/api/type/login'
 import LoginContainer from '@/layout/login-layout/LoginContainer.vue'
 import LoginLayout from '@/layout/login-layout/LoginLayout.vue'
 import loginApi from '@/api/user/login'
 import authApi from '@/api/system-settings/auth-setting'
-import { t, getBrowserLang } from '@/locales'
+import {t, getBrowserLang} from '@/locales'
 import useStore from '@/stores'
-import { useI18n } from 'vue-i18n'
+import {useI18n} from 'vue-i18n'
 import QrCodeTab from '@/views/login/scanCompinents/QrCodeTab.vue'
-import { MsgConfirm, MsgError } from '@/utils/message.ts'
+import {MsgConfirm, MsgError} from '@/utils/message.ts'
 import * as dd from 'dingtalk-jsapi'
-import { loadScript } from '@/utils/common'
+import {loadScript} from '@/utils/common'

 const router = useRouter()
-const { login, user, theme } = useStore()
-const { locale } = useI18n({ useScope: 'global' })
+const {login, user, theme} = useStore()
+const {locale} = useI18n({useScope: 'global'})
 const loading = ref<boolean>(false)
-
+const route = useRoute()
 const identifyCode = ref<string>('')
-
 const loginFormRef = ref<FormInstance>()
+const authSetting = ref<any>(null)
+const defaultQrTab = ref<string>('')
 const loginForm = ref<LoginRequest>({
  username: '',
  password: '',
@ -172,7 +174,7 @@ const rules = ref<FormRules<LoginRequest>>({
  ],
  captcha: [
    {
-      required: true,
+      required: false,
      message: t('views.login.loginForm.captcha.requiredMessage'),
      trigger: 'blur',
    },
@ -191,7 +193,7 @@ const loginHandle = () => {
          .asyncLdapLogin(loginForm.value)
          .then(() => {
            locale.value = localStorage.getItem('MaxKB-locale') || getBrowserLang() || 'en-US'
-            router.push({ name: 'home' })
+            router.push({name: 'home'})
          })
          .catch(() => {
            loading.value = false
@ -202,24 +204,109 @@ const loginHandle = () => {
          .then(() => {
            locale.value = localStorage.getItem('MaxKB-locale') || getBrowserLang() || 'en-US'
            localStorage.setItem('workspace_id', 'default')
-            router.push({ name: 'home' })
+            localStorage.removeItem(loginForm.value.username)
+            router.push({name: 'home'})
          })
          .catch(() => {
+            const username = loginForm.value.username
+            localStorage.setItem(username, String(Number(localStorage.getItem(username) || '0') + 1))
            loading.value = false
+            loginForm.value.username = ''
+            loginForm.value.password = ''
+            const timestampKey = `${username}_first_fail_timestamp`
+            if (!localStorage.getItem(timestampKey)) {
+              localStorage.setItem(timestampKey, Date.now().toString())
+            }
          })
      }
    }
  })
 }

-function makeCode() {
-  loginApi.getCaptcha().then((res: any) => {
-    identifyCode.value = res.data.captcha
+const showCaptcha = computed<boolean>(() => {
+  if (!authSetting.value) return true
+
+  const maxAttempts = authSetting.value.max_attempts
+
+  // -1 表示一直不显示
+  if (maxAttempts === -1) {
+    return false
+  }
+
+  // 0 表示一直显示
+  if (maxAttempts === 0) {
+    return true
+  }
+
+  // 大于 0，根据登录失败次数决定
+  const username = loginForm.value.username?.trim()
+  if (!username) {
+    return false // 没有输入用户名时不显示
+  }
+
+  const timestampKey = `${username}_first_fail_timestamp`
+  const firstFailTimestamp = localStorage.getItem(timestampKey)
+
+  if (firstFailTimestamp) {
+    const expirationTime = 10 * 60 * 1000 // 10分钟毫秒数
+    if (Date.now() - parseInt(firstFailTimestamp) > expirationTime) {
+      // 过期则清除记录
+      localStorage.removeItem(username)
+      localStorage.removeItem(timestampKey)
+      return false
+    }
+  } else {
+    // 如果没有时间戳但有失败次数，可能是旧数据，清除失败次数
+    const failCount = Number(localStorage.getItem(username) || '0')
+    if (failCount > 0) {
+      localStorage.removeItem(username)
+      return false
+    }
+  }
+
+  const failCount = Number(localStorage.getItem(username) || '0')
+  console.log('failCount', failCount)
+
+  return failCount >= maxAttempts
+})
+
+function makeCode(username?: string) {
+  loginApi.getCaptcha(username).then((res: any) => {
+    if (res && res.data && res.data.captcha) {
+      identifyCode.value = res.data.captcha
+    }
+  }).catch((error) => {
+    console.error('Failed to get captcha:', error)
  })
 }

+function handleUsernameBlur(username: string) {
+  if (showCaptcha.value) {
+    makeCode(username)
+  }
+}
+
 onBeforeMount(() => {
-  makeCode()
+  authApi.getLoginAuthSetting().then((res) => {
+    if (Object.keys(res.data).length > 0) {
+      authSetting.value = res.data;
+    } else {
+      authSetting.value = {
+        max_attempts: 1,
+        default_value: 'password',
+      }
+    }
+    const params = route.query
+    if (params.login_mode !== 'manual') {
+      const defaultMode = authSetting.value.default_value
+      if (['lark', 'wecom', 'dingtalk'].includes(defaultMode)) {
+        changeMode('QR_CODE', false)
+        defaultQrTab.value = defaultMode
+      } else {
+        changeMode(defaultMode, false)
+      }
+    }
+  })
 })

 const modeList = ref<string[]>([''])
@ -241,6 +328,7 @@ function uuidv4() {
    return v.toString(16)
  })
 }
+
 const newDefaultSlogan = computed(() => {
  const default_login = '强大易用的企业级智能体平台'
  if (!theme.themeInfo?.slogan || default_login == theme.themeInfo?.slogan) {
@ -249,58 +337,60 @@ const newDefaultSlogan = computed(() => {
    return theme.themeInfo?.slogan
  }
 })
-function redirectAuth(authType: string) {
+
+function redirectAuth(authType: string, needMessage: boolean = true) {
  if (authType === 'LDAP' || authType === '') {
    return
  }
  authApi.getAuthSetting(authType, loading).then((res: any) => {
-    if (!res.data) {
+    if (!res.data || !res.data.config) {
      return
    }
-    MsgConfirm(t('views.login.jump_tip'), '', {
-      confirmButtonText: t('views.login.jump'),
-      cancelButtonText: t('common.cancel'),
-      confirmButtonClass: '',
-    })
-      .then(() => {
-        if (!res.data.config) {
-          return
-        }
-        const config = res.data.config
-        const redirectUrl = eval(`\`${config.redirectUrl}\``)
-        let url
-        if (authType === 'CAS') {
-          url = config.ldpUri
-          if (url.indexOf('?') !== -1) {
-            url = `${config.ldpUri}&service=${encodeURIComponent(redirectUrl)}`
-          } else {
-            url = `${config.ldpUri}?service=${encodeURIComponent(redirectUrl)}`
-          }
-        }
-        if (authType === 'OIDC') {
-          const scope = config.scope || 'openid+profile+email'
-          url = `${config.authEndpoint}?client_id=${config.clientId}&redirect_uri=${redirectUrl}&response_type=code&scope=${scope}`
-          if (config.state) {
-            url += `&state=${config.state}`
-          }
-        }
-        if (authType === 'OAuth2') {
-          url =
-            `${config.authEndpoint}?client_id=${config.clientId}&response_type=code` +
-            `&redirect_uri=${redirectUrl}&state=${uuidv4()}`
-          if (config.scope) {
-            url += `&scope=${config.scope}`
-          }
-        }
-        if (url) {
-          window.location.href = url
-        }
+
+    const config = res.data.config
+    // 构造带查询参数的redirectUrl
+    const redirectUrl = `${config.redirectUrl}`
+    let url
+    if (authType === 'CAS') {
+      url = config.ldpUri
+      url +=
+        url.indexOf('?') !== -1
+          ? `&service=${encodeURIComponent(redirectUrl)}`
+          : `?service=${encodeURIComponent(redirectUrl)}`
+    } else if (authType === 'OIDC') {
+      const scope = config.scope || 'openid+profile+email'
+      url = `${config.authEndpoint}?client_id=${config.clientId}&redirect_uri=${redirectUrl}&response_type=code&scope=${scope}`
+      if (config.state) {
+        url += `&state=${config.state}`
+      }
+    } else if (authType === 'OAuth2') {
+      url = `${config.authEndpoint}?client_id=${config.clientId}&response_type=code&redirect_uri=${redirectUrl}&state=${uuidv4()}`
+      if (config.scope) {
+        url += `&scope=${config.scope}`
+      }
+    }
+    if (!url) {
+      return
+    }
+    if (needMessage) {
+      MsgConfirm(t('views.login.jump_tip'), '', {
+        confirmButtonText: t('views.login.jump'),
+        cancelButtonText: t('common.cancel'),
+        confirmButtonClass: '',
      })
-      .catch(() => {})
+        .then(() => {
+          window.location.href = url
+        })
+        .catch(() => {
+        })
+    } else {
+      console.log('url', url)
+      window.location.href = url
+    }
  })
 }

-function changeMode(val: string) {
+function changeMode(val: string, needMessage: boolean = true) {
  loginMode.value = val === 'LDAP' ? val : ''
  if (val === 'QR_CODE') {
    loginMode.value = val
@ -313,7 +403,7 @@ function changeMode(val: string) {
    password: '',
    captcha: '',
  }
-  redirectAuth(val)
+  redirectAuth(val, needMessage)
  loginFormRef.value?.clearValidate()
 }

@ -362,7 +452,6 @@ onBeforeMount(() => {
 declare const window: any

 onMounted(() => {
-  makeCode()
  const route = useRoute()
  const currentUrl = ref(route.fullPath)
  const params = new URLSearchParams(currentUrl.value.split('?')[1])
@ -371,10 +460,10 @@ onMounted(() => {
  const handleDingTalk = () => {
    const code = params.get('corpId')
    if (code) {
-      dd.runtime.permission.requestAuthCode({ corpId: code }).then((res) => {
+      dd.runtime.permission.requestAuthCode({corpId: code}).then((res) => {
        console.log('DingTalk client request success:', res)
        login.dingOauth2Callback(res.code).then(() => {
-          router.push({ name: 'home' })
+          router.push({name: 'home'})
        })
      })
    }
@ -387,7 +476,7 @@ onMounted(() => {
        appId: appId,
        success: (res: any) => {
          login.larkCallback(res.code).then(() => {
-            router.push({ name: 'home' })
+            router.push({name: 'home'})
          })
        },
        fail: (error: any) => {
@ -407,11 +496,11 @@ onMounted(() => {
            scopeList: [],
            success: (res: any) => {
              login.larkCallback(res.code).then(() => {
-                router.push({ name: 'home' })
+                router.push({name: 'home'})
              })
            },
            fail: (error: any) => {
-              const { errno } = error
+              const {errno} = error
              if (errno === 103) {
                callRequestAuthCode()
              }
--- a/ui/src/views/login/scanCompinents/QrCodeTab.vue
+++ b/ui/src/views/login/scanCompinents/QrCodeTab.vue
@ -14,9 +14,11 @@
 </template>

 <script setup lang="ts">
-import { onMounted, ref, defineAsyncComponent } from 'vue'
+import {onMounted, ref, defineAsyncComponent} from 'vue'
 import useStore from '@/stores'
-const { login } = useStore()
+
+const {login} = useStore()
+
 interface Tab {
  key: string
  value: string
@ -36,11 +38,11 @@ interface Config {
  agentId?: string
 }

-const props = defineProps<{ tabs: Tab[] }>()
+const props = defineProps<{ tabs: Tab[], defaultTab?: string }>()
 const activeKey = ref('')
 const allConfigs = ref<PlatformConfig[]>([])
-const config = ref<Config>({ app_key: '', app_secret: '' })
-// const logoUrl = ref('')
+const config = ref<Config>({app_key: '', app_secret: ''})
+

 async function getPlatformInfo() {
  try {
@ -56,6 +58,10 @@ onMounted(async () => {
  }
  allConfigs.value = await getPlatformInfo()
  updateConfig(activeKey.value)
+  console.log(props.defaultTab)
+  if (props.defaultTab) {
+    selectTab(props.defaultTab)
+  }
 })

 const updateConfig = (key: string) => {
--- a/ui/src/views/system-setting/authentication/component/OAuth2.vue
+++ b/ui/src/views/system-setting/authentication/component/OAuth2.vue
@ -64,15 +64,6 @@
              show-password
            />
          </el-form-item>
-          <el-form-item
-            :label="$t('views.system.authentication.oauth2.redirectUrl')"
-            prop="config.redirectUrl"
-          >
-            <el-input
-              v-model="form.config.redirectUrl"
-              :placeholder="$t('views.system.authentication.oauth2.redirectUrlPlaceholder')"
-            />
-          </el-form-item>
          <el-form-item
            :label="$t('views.system.authentication.oauth2.filedMapping')"
            prop="config.fieldMapping"
@ -82,6 +73,15 @@
              :placeholder="$t('views.system.authentication.oauth2.filedMappingPlaceholder')"
            />
          </el-form-item>
+          <el-form-item
+            :label="$t('views.system.authentication.oauth2.redirectUrl')"
+            prop="config.redirectUrl"
+          >
+            <el-input
+              v-model="form.config.redirectUrl"
+              :placeholder="$t('views.system.authentication.oauth2.redirectUrlPlaceholder')"
+            />
+          </el-form-item>
          <el-form-item>
            <el-checkbox v-model="form.is_active"
            >{{ $t('views.system.authentication.oauth2.enableAuthentication') }}
--- a/ui/src/views/system-setting/authentication/component/Setting.vue
+++ b/ui/src/views/system-setting/authentication/component/Setting.vue
@ -0,0 +1,136 @@
+<template>
+  <div class="authentication-setting__main main-calc-height">
+    <el-scrollbar>
+      <div class="form-container p-24" v-loading="loading">
+        <el-form ref="authFormRef" :model="form" label-position="top"
+                 require-asterisk-position="right">
+          <!-- 登录方式选择框 -->
+          <el-form-item
+            :label="$t('views.system.default_login')"
+            :rules="[
+              {
+                required: true,
+                message: $t('views.applicationOverview.appInfo.LimitDialog.loginMethodRequired'),
+                trigger: 'change',
+              },
+            ]"
+            prop="default_value"
+            style="padding-top: 16px"
+          >
+            <el-radio-group v-model="form.default_value" class="radio-group">
+              <el-radio
+                v-for="method in loginMethods"
+                :key="method.value"
+                :label="method.value"
+                class="radio-item"
+              >
+                {{ method.label }}
+              </el-radio>
+            </el-radio-group>
+          </el-form-item>
+
+          <el-form-item
+            :label="$t('views.system.display_code')"
+            :rules="[
+              {
+                required: true,
+                message: $t('views.applicationOverview.appInfo.LimitDialog.displayCodeRequired'),
+                trigger: 'change',
+              },
+            ]"
+            prop="max_attempts"
+          >
+            <el-input-number
+              v-model="form.max_attempts"
+              :min="-1"
+              :max="10"
+              :step="1"
+              controls-position="right"
+            />
+            <span style="margin-left: 8px; color: #909399; font-size: 12px;">
+      {{ $t('views.system.display_codeTip') }}
+    </span>
+          </el-form-item>
+        </el-form>
+        <div style="margin-top:16px;">
+            <span
+              v-hasPermission="
+                new ComplexPermission([RoleConst.ADMIN], [PermissionConst.LOGIN_AUTH_EDIT], [], 'OR')
+              "
+              class="mr-12"
+            >
+              <el-button @click="submit(authFormRef)" type="primary" :disabled="loading">
+                {{ $t('common.save') }}
+              </el-button>
+            </span>
+        </div>
+      </div>
+    </el-scrollbar>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {ref, onMounted, reactive} from "vue";
+import {ComplexPermission} from "@/utils/permission/type";
+import {PermissionConst, RoleConst} from "@/utils/permission/data";
+import type {FormInstance, FormRules} from 'element-plus';
+import {t} from "@/locales";
+import authApi from "@/api/system-settings/auth-setting.ts";
+import {MsgSuccess} from "@/utils/message.ts";
+
+const loginMethods = ref<Array<{ label: string; value: string }>>([]);
+const loading = ref(false);
+const authFormRef = ref<FormInstance>();
+
+
+const form = ref<any>({
+  default_value: 'password',
+  max_attempts: 1,
+})
+
+const fetchLoginMethods = () => {
+  // 模拟接口返回数据
+  loginMethods.value = [
+    {label: '密码登录', value: 'password'},
+    {label: 'LDAP', value: 'ldap'},
+    {label: 'OIDC', value: 'oidc'},
+    {label: 'CAS', value: 'cas'},
+    {label: 'OAuth2', value: 'oauth2'},
+    {label: '企业微信', value: 'wechat'},
+    {label: '钉钉', value: 'dingding'},
+    {label: '飞书', value: 'lark'},
+  ];
+};
+
+const submit = async (formEl: FormInstance | undefined) => {
+  if (!formEl) return;
+  console.log(form)
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      authApi.putLoginSetting(form.value, loading).then((res) => {
+        MsgSuccess(t('common.saveSuccess'))
+      })
+    } else {
+      console.log('error submit!', fields);
+    }
+  });
+};
+
+
+onMounted(() => {
+  fetchLoginMethods();
+  authApi.getLoginSetting().then((res) => {
+    if (Object.keys(res.data).length > 0) {
+      form.value = res.data;
+    }
+  })
+});
+</script>
+
+<style scoped>
+.radio-group {
+  display: flex;
+  flex-wrap: wrap;
+  flex-direction: row;
+}
+</style>
--- a/ui/src/views/system-setting/authentication/index.vue
+++ b/ui/src/views/system-setting/authentication/index.vue
@ -23,14 +23,20 @@ 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 Setting from './component/Setting.vue'
 import { t } from '@/locales'
 import useStore from '@/stores'

 const { user } = useStore()
 const router = useRouter()

-const activeName = ref('LDAP')
+const activeName = ref('SETTING')
 const tabList = [
+  {
+    label: t('views.system.setting'),
+    name: "SETTING",
+    component: Setting,
+  },
  {
    label: t('views.system.authentication.ldap.title'),
    name: 'LDAP',