feat: add login settings management and captcha display logic

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
 }

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) => {
+const getCaptcha: (username?: string, loading?: Ref<boolean>) => Promise<Result<any>> = (username, loading) => {
-  return get('/user/captcha', undefined, loading)
+  return get('/user/captcha', {username}, loading)
 }
 
 /**

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',
 }

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: '登录设置',
 }

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: '登录設置',
 }

ui/src/views/application-overview/xpack-component/XPackLimitDrawer.vue

@@ -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 {ref, watch, computed} from 'vue'
-import { useRoute, useRouter } from 'vue-router'
+import {useRoute, useRouter} from 'vue-router'
-import type { FormInstance, FormRules } from 'element-plus'
+import type {FormInstance, FormRules} from 'element-plus'
-import { MsgSuccess } from '@/utils/message'
+import {MsgSuccess} from '@/utils/message'
-import { t } from '@/locales'
+import {t} from '@/locales'
-import { copyClick } from '@/utils/clipboard'
+import {copyClick} from '@/utils/clipboard'
-import { loadSharedApi } from '@/utils/dynamics-api/shared-api'
+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 {

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() {
+function makeCode(userrname?: string) {
-  loginApi.getCaptcha().then((res: any) => {
+  loginApi.getCaptcha(userrname).then((res: any) => {
     identifyCode.value = res.data.captcha
   })
 }

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>
@@ -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 {onMounted, ref, onBeforeMount, computed} from 'vue'
-import { useRoute, useRouter } from 'vue-router'
+import {useRoute, useRouter} from 'vue-router'
-import type { FormInstance, FormRules } from 'element-plus'
+import type {FormInstance, FormRules} from 'element-plus'
-import type { LoginRequest } from '@/api/type/login'
+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 {login, user, theme} = useStore()
-const { locale } = useI18n({ useScope: 'global' })
+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() {
+const showCaptcha = computed<boolean>(() => {
-  loginApi.getCaptcha().then((res: any) => {
+  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
     }
+
+    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: '',
       })
         .then(() => {
-        if (!res.data.config) {
+          window.location.href = url
-          return
+        })
-        }
+        .catch(() => {
-        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)}`
+      console.log('url', url)
-          }
-        }
-        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
     }
   })
-      .catch(() => {})
-  })
 }
 
-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()
               }

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 config = ref<Config>({app_key: '', app_secret: ''})
-// const logoUrl = ref('')
+
 
 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) => {

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') }}

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>

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',