feat: enhance login logic with dynamic captcha display and add API for fetching authentication settings

ui/src/api/system-settings/auth-setting.ts

@@ -50,11 +50,19 @@ const getLoginAuthSetting: (loading?: Ref<boolean>) => Promise<Result<any>> = (l
   return get(`login/auth/setting`, undefined, loading)
 }
 
+/**
+ * 获取认证设置
+ */
+const getLoginViewAuthSetting: (auth_type: string, loading?: Ref<boolean>) => Promise<Result<any>> = (auth_type, loading) => {
+  return get(`login/${prefix}/${auth_type}/detail`, undefined, loading)
+}
+
 export default {
   getAuthSetting,
   postAuthSetting,
   putAuthSetting,
   putLoginSetting,
   getLoginSetting,
-  getLoginAuthSetting
+  getLoginAuthSetting,
+  getLoginViewAuthSetting
 }

ui/src/views/chat/user-login/index.vue

@@ -66,6 +66,7 @@
                   size="large"
                   class="input-item"
                   v-model="loginForm.username"
+                  @blur="handleUsernameBlur(loginForm.username)"
                   :placeholder="$t('views.login.loginForm.username.placeholder')"
                 >
                 </el-input>
@@ -84,7 +85,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
@@ -100,7 +101,7 @@
                     alt=""
                     height="38"
                     class="ml-8 cursor border border-r-6"
-                    @click="makeCode"
+                    @click="makeCode(loginForm.username)"
                   />
                 </div>
               </el-form-item>
@@ -212,6 +213,7 @@ const loginForm = ref<LoginRequest>({
   captcha: '',
 })
 
+const max_attempts = ref<number>(1)  // 声明为 ref
 const rules = ref<FormRules<LoginRequest>>({
   username: [
     {
@@ -253,20 +255,30 @@ const loginHandle = () => {
           params: {accessToken: chatUser.accessToken},
           query: route.query,
         })
+        localStorage.removeItem('chat_' + loginForm.value.username)
+      }).catch(() => {
+        const username = loginForm.value.username
+        localStorage.setItem('chat_' + username, String(Number(localStorage.getItem('chat_' + username) || '0') + 1))
+        loading.value = false
+        loginForm.value.username = ''
+        loginForm.value.password = ''
+        const timestampKey = `${username}_chat_first_fail_timestamp`
+        if (!localStorage.getItem(timestampKey)) {
+          localStorage.setItem(timestampKey, Date.now().toString())
+        }
       })
     }
   })
 }
 
-function makeCode(userrname?: string) {
+function makeCode(username?: string) {
-  loginApi.getCaptcha(userrname).then((res: any) => {
+  loginApi.getCaptcha(username).then((res: any) => {
     identifyCode.value = res.data.captcha
   })
 }
 
 onBeforeMount(() => {
   locale.value = chatUser.getLanguage()
-  makeCode()
 })
 
 const modeList = ref<string[]>([])
@@ -365,7 +377,59 @@ function changeMode(val: string) {
   loginFormRef.value?.clearValidate()
 }
 
+const showCaptcha = computed<boolean>(() => {
+  // -1 表示一直不显示
+  if (max_attempts.value === -1) {
+    return false
+  }
+
+  // 0 表示一直显示
+  if (max_attempts.value === 0) {
+    return true
+  }
+
+  // 大于 0，根据登录失败次数决定
+  const username = loginForm.value.username?.trim()
+  if (!username) {
+    return false // 没有输入用户名时不显示
+  }
+
+  const timestampKey = `${username}_chat_first_fail_timestamp`
+  const firstFailTimestamp = localStorage.getItem(timestampKey)
+
+  if (firstFailTimestamp) {
+    const expirationTime = 60 * 60 * 1000 // 10分钟毫秒数
+    if (Date.now() - parseInt(firstFailTimestamp) > expirationTime) {
+      // 过期则清除记录
+      localStorage.removeItem('chat_' + username)
+      localStorage.removeItem(timestampKey)
+      return false
+    }
+  } else {
+    // 如果没有时间戳但有失败次数，可能是旧数据，清除失败次数
+    const failCount = Number(localStorage.getItem('chat_' + username) || '0')
+    if (failCount > 0) {
+      localStorage.removeItem('chat_' + username)
+      return false
+    }
+  }
+
+  const failCount = Number(localStorage.getItem('chat_' + username) || '0')
+  console.log('failCount', failCount)
+
+  return failCount >= max_attempts.value
+})
+
+function handleUsernameBlur(username: string) {
+  if (showCaptcha.value) {
+    makeCode(username)
+  }
+}
+
 onBeforeMount(() => {
+  if (chatUser.chat_profile?.max_attempts) {
+    max_attempts.value = chatUser.chat_profile.max_attempts
+  }
   if (chatUser.chat_profile?.login_value) {
     modeList.value = chatUser.chat_profile.login_value
     if (modeList.value.includes('LOCAL')) {

ui/src/views/login/index.vue

@@ -287,6 +287,9 @@ function handleUsernameBlur(username: string) {
 }
 
 onBeforeMount(() => {
+  user.asyncGetProfile().then((res) => {
+    // 企业版和专业版：第三方登录
+    if (user.isPE() || user.isEE()) {
       authApi.getLoginAuthSetting().then((res) => {
         if (Object.keys(res.data).length > 0) {
           authSetting.value = res.data;
@@ -307,42 +310,48 @@ onBeforeMount(() => {
           }
         }
       })
-})
+    } else {
+      authSetting.value = {
+        max_attempts: 1,
+        default_value: 'password',
+      }
+    }
+  })
 
-const modeList = ref<string[]>([''])
+  const modeList = ref<string[]>([''])
-const QrList = ref<any[]>([''])
+  const QrList = ref<any[]>([''])
-const loginMode = ref('')
+  const loginMode = ref('')
-const showQrCodeTab = ref(false)
+  const showQrCodeTab = ref(false)
 
-interface qrOption {
+  interface qrOption {
     key: string
     value: string
-}
+  }
 
-const orgOptions = ref<qrOption[]>([])
+  const orgOptions = ref<qrOption[]>([])
 
-function uuidv4() {
+  function uuidv4() {
     return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
       const r = (Math.random() * 16) | 0
       const v = c === 'x' ? r : (r & 0x3) | 0x8
       return v.toString(16)
     })
-}
+  }
 
-const newDefaultSlogan = computed(() => {
+  const newDefaultSlogan = computed(() => {
     const default_login = '强大易用的企业级智能体平台'
     if (!theme.themeInfo?.slogan || default_login == theme.themeInfo?.slogan) {
       return t('theme.defaultSlogan')
     } else {
       return theme.themeInfo?.slogan
     }
-})
+  })
 
-function redirectAuth(authType: string, needMessage: boolean = true) {
+  function redirectAuth(authType: string, needMessage: boolean = true) {
     if (authType === 'LDAP' || authType === '') {
       return
     }
-  authApi.getAuthSetting(authType, loading).then((res: any) => {
+    authApi.getLoginViewAuthSetting(authType, loading).then((res: any) => {
       if (!res.data || !res.data.config) {
         return
       }
@@ -388,9 +397,9 @@ function redirectAuth(authType: string, needMessage: boolean = true) {
         window.location.href = url
       }
     })
-}
+  }
 
-function changeMode(val: string, needMessage: boolean = true) {
+  function changeMode(val: string, needMessage: boolean = true) {
     loginMode.value = val === 'LDAP' ? val : ''
     if (val === 'QR_CODE') {
       loginMode.value = val
@@ -405,9 +414,9 @@ function changeMode(val: string, needMessage: boolean = true) {
     }
     redirectAuth(val, needMessage)
     loginFormRef.value?.clearValidate()
-}
+  }
 
-onBeforeMount(() => {
+  onBeforeMount(() => {
     loading.value = true
     user.asyncGetProfile().then((res) => {
       // 企业版和专业版：第三方登录
@@ -448,10 +457,10 @@ onBeforeMount(() => {
         loading.value = false
       }
     })
-})
+  })
-declare const window: any
+  declare const window: any
 
-onMounted(() => {
+  onMounted(() => {
     const route = useRoute()
     const currentUrl = ref(route.fullPath)
     const params = new URLSearchParams(currentUrl.value.split('?')[1])
@@ -525,7 +534,7 @@ onMounted(() => {
       default:
         break
     }
-})
+  })
 </script>
 <style lang="scss" scoped>
 .login-gradient-divider {