From e4e58bc3bd06cd4a403898920670db42130ba266 Mon Sep 17 00:00:00 2001
From: wangdan-fit2cloud <dan.wang@fit2cloud.com>
Date: Thu, 12 Jun 2025 12:03:43 +0800
Subject: [PATCH] feat: user-login

---
 .../login-layout}/LoginContainer.vue          |   0
 .../login-layout}/LoginLayout.vue             |   2 +-
 .../layout/login-layout/UserLoginLayout.vue   |  60 +++
 ui/src/request/index.ts                       |   2 +-
 ui/src/router/index.ts                        |   2 +-
 ui/src/router/routes.ts                       |   7 +
 .../views/chat/user-login/ForgotPassword.vue  | 137 ++++++
 .../views/chat/user-login/ResetPassword.vue   | 137 ++++++
 .../user-login/components/LoginContainer.vue  |  37 ++
 .../user-login/components/LoginLayout.vue     | 108 +++++
 ui/src/views/chat/user-login/index.vue        | 450 ++++++++++++++++++
 .../user-login/scanCompinents/QrCodeTab.vue   |  74 +++
 .../scanCompinents/dingtalkQrCode.vue         | 141 ++++++
 .../user-login/scanCompinents/larkQrCode.vue  |  59 +++
 .../user-login/scanCompinents/wecomQrCode.vue |  79 +++
 ui/src/views/login/ForgotPassword.vue         |   4 +-
 ui/src/views/login/ResetPassword.vue          |   2 +
 ui/src/views/login/index.vue                  |   4 +-
 ui/src/views/theme/LoginPreview.vue           |   4 +-
 19 files changed, 1301 insertions(+), 8 deletions(-)
 rename ui/src/{views/login/components => layout/login-layout}/LoginContainer.vue (100%)
 rename ui/src/{views/login/components => layout/login-layout}/LoginLayout.vue (98%)
 create mode 100644 ui/src/layout/login-layout/UserLoginLayout.vue
 create mode 100644 ui/src/views/chat/user-login/ForgotPassword.vue
 create mode 100644 ui/src/views/chat/user-login/ResetPassword.vue
 create mode 100644 ui/src/views/chat/user-login/components/LoginContainer.vue
 create mode 100644 ui/src/views/chat/user-login/components/LoginLayout.vue
 create mode 100644 ui/src/views/chat/user-login/index.vue
 create mode 100644 ui/src/views/chat/user-login/scanCompinents/QrCodeTab.vue
 create mode 100644 ui/src/views/chat/user-login/scanCompinents/dingtalkQrCode.vue
 create mode 100644 ui/src/views/chat/user-login/scanCompinents/larkQrCode.vue
 create mode 100644 ui/src/views/chat/user-login/scanCompinents/wecomQrCode.vue

diff --git a/ui/src/views/login/components/LoginContainer.vue b/ui/src/layout/login-layout/LoginContainer.vue
similarity index 100%
rename from ui/src/views/login/components/LoginContainer.vue
rename to ui/src/layout/login-layout/LoginContainer.vue
diff --git a/ui/src/views/login/components/LoginLayout.vue b/ui/src/layout/login-layout/LoginLayout.vue
similarity index 98%
rename from ui/src/views/login/components/LoginLayout.vue
rename to ui/src/layout/login-layout/LoginLayout.vue
index 5ea09fe62..8c2150c4e 100644
--- a/ui/src/views/login/components/LoginLayout.vue
+++ b/ui/src/layout/login-layout/LoginLayout.vue
@@ -79,7 +79,7 @@ const loginImage = computed(() => {
     return `${fileURL.value}`
   } else {
     const imgName = getThemeImg(theme.themeInfo?.theme)
-    const imgPath = `../../../assets/theme/${imgName}.jpg`
+    const imgPath = `../../assets/theme/${imgName}.jpg`
     const imageUrl = new URL(imgPath, import.meta.url).href
     return imageUrl
   }
diff --git a/ui/src/layout/login-layout/UserLoginLayout.vue b/ui/src/layout/login-layout/UserLoginLayout.vue
new file mode 100644
index 000000000..09b2893a7
--- /dev/null
+++ b/ui/src/layout/login-layout/UserLoginLayout.vue
@@ -0,0 +1,60 @@
+<template>
+  <div class="login-warp flex-center">
+    <div class="login-container w-full h-full">
+      <div class="flex-center w-full h-full">
+        <slot></slot>
+      </div>
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+import { computed } from 'vue'
+import { getThemeImg } from '@/utils/theme'
+import useStore from '@/stores'
+import { useLocalStorage } from '@vueuse/core'
+import { langList, localeConfigKey, getBrowserLang } from '@/locales/index'
+defineProps({
+  lang: {
+    type: Boolean,
+    default: true,
+  },
+})
+const { user, theme } = useStore()
+
+const changeLang = (lang: string) => {
+  useLocalStorage(localeConfigKey, getBrowserLang()).value = lang
+  window.location.reload()
+}
+
+const currentLanguage = computed(() => {
+  return langList.value?.filter((v: any) => v.value === user.getLanguage())?.[0]?.label
+})
+
+const fileURL = computed(() => {
+  if (theme.themeInfo?.loginImage) {
+    if (typeof theme.themeInfo?.loginImage === 'string') {
+      return theme.themeInfo?.loginImage
+    } else {
+      return URL.createObjectURL(theme.themeInfo?.loginImage)
+    }
+  } else {
+    return ''
+  }
+})
+
+const loginImage = computed(() => {
+  if (theme.themeInfo?.loginImage) {
+    return `${fileURL.value}`
+  } else {
+    const imgName = getThemeImg(theme.themeInfo?.theme)
+    const imgPath = `../../assets/theme/${imgName}.jpg`
+    const imageUrl = new URL(imgPath, import.meta.url).href
+    return imageUrl
+  }
+})
+</script>
+<style lang="scss" scoped>
+.login-warp {
+  height: 100vh;
+}
+</style>
diff --git a/ui/src/request/index.ts b/ui/src/request/index.ts
index 4f35ee077..cda7de444 100644
--- a/ui/src/request/index.ts
+++ b/ui/src/request/index.ts
@@ -47,7 +47,7 @@ instance.interceptors.response.use(
         }
         if (
           !response.config.url.includes('/valid') &&
-          !response.config.url.includes('/function_lib/debug')
+          !response.config.url.includes('/tool/debug')
         ) {
           MsgError(response.data.message)
           return Promise.reject(response.data)
diff --git a/ui/src/router/index.ts b/ui/src/router/index.ts
index 8283e332a..06128d769 100644
--- a/ui/src/router/index.ts
+++ b/ui/src/router/index.ts
@@ -25,8 +25,8 @@ router.beforeEach(
       return
     }
     const { user, login } = useStore()
-    const notAuthRouteNameList = ['register', 'login', 'forgot_password', 'reset_password', 'Chat']
 
+    const notAuthRouteNameList = ['login', 'ForgotPassword', 'ResetPassword', 'Chat', 'UserLogin']
     if (!notAuthRouteNameList.includes(to.name ? to.name.toString() : '')) {
       if (to.query && to.query.token) {
         localStorage.setItem('token', to.query.token.toString())
diff --git a/ui/src/router/routes.ts b/ui/src/router/routes.ts
index 6185d6ff5..7f470824c 100644
--- a/ui/src/router/routes.ts
+++ b/ui/src/router/routes.ts
@@ -24,6 +24,13 @@ export const routes: Array<RouteRecordRaw> = [
     component: () => import('@/views/chat/index.vue'),
   },
 
+   // 对话用户登录
+  {
+    path: '/user-login/:accessToken',
+    name: 'UserLogin',
+    component: () => import('@/views/chat/user-login/index.vue'),
+  },
+
   {
     path: '/login',
     name: 'login',
diff --git a/ui/src/views/chat/user-login/ForgotPassword.vue b/ui/src/views/chat/user-login/ForgotPassword.vue
new file mode 100644
index 000000000..6cd5c5b58
--- /dev/null
+++ b/ui/src/views/chat/user-login/ForgotPassword.vue
@@ -0,0 +1,137 @@
+<template>
+  <UserLoginLayout>
+    <LoginContainer :subTitle="$t('theme.defaultSlogan')">
+      <h2 class="mb-24">{{ $t('views.login.resetPassword') }}</h2>
+      <el-form
+        class="reset-password-form"
+        ref="resetPasswordFormRef"
+        :model="resetPasswordForm"
+        :rules="rules"
+      >
+        <div class="mb-24">
+          <el-form-item prop="password">
+            <el-input
+              type="password"
+              size="large"
+              class="input-item"
+              v-model="resetPasswordForm.password"
+              :placeholder="$t('views.login.loginForm.password.placeholder')"
+              show-password
+            >
+            </el-input>
+          </el-form-item>
+        </div>
+        <div class="mb-24">
+          <el-form-item prop="re_password">
+            <el-input
+              type="password"
+              size="large"
+              class="input-item"
+              v-model="resetPasswordForm.re_password"
+              :placeholder="$t('views.login.loginForm.re_password.placeholder')"
+              show-password
+            >
+            </el-input>
+          </el-form-item>
+        </div>
+      </el-form>
+      <el-button size="large" type="primary" class="w-full" @click="resetPassword">{{
+        $t('common.confirm')
+      }}</el-button>
+      <div class="operate-container mt-12">
+        <el-button
+          size="large"
+          class="register"
+          @click="router.push('/login')"
+          link
+          type="primary"
+          icon="ArrowLeft"
+        >
+          {{ $t('views.login.buttons.backLogin') }}
+        </el-button>
+      </div>
+    </LoginContainer>
+  </UserLoginLayout>
+</template>
+<script setup lang="ts">
+import { ref, onMounted } from 'vue'
+import type { ResetPasswordRequest } from '@/api/type/user'
+import LoginContainer from '@/layout/login-layout/LoginContainer.vue'
+import UserLoginLayout from '@/layout/login-layout/UserLoginLayout.vue'
+import { useRouter, useRoute } from 'vue-router'
+import { MsgSuccess } from '@/utils/message'
+import type { FormInstance, FormRules } from 'element-plus'
+import UserApi from '@/api/user/user'
+import { t } from '@/locales'
+const router = useRouter()
+const route = useRoute()
+const {
+  params: { code, email },
+} = route
+const resetPasswordForm = ref<ResetPasswordRequest>({
+  password: '',
+  re_password: '',
+  email: '',
+  code: '',
+})
+
+onMounted(() => {
+  if (code && email) {
+    resetPasswordForm.value.code = code as string
+    resetPasswordForm.value.email = email as string
+  } else {
+    router.push('forgot_password')
+  }
+})
+
+const rules = ref<FormRules<ResetPasswordRequest>>({
+  password: [
+    {
+      required: true,
+      message: t('views.login.loginForm.re_password.requiredMessage'),
+      trigger: 'blur',
+    },
+    {
+      min: 6,
+      max: 20,
+      message: t('views.login.loginForm.password.lengthMessage'),
+      trigger: 'blur',
+    },
+  ],
+  re_password: [
+    {
+      required: true,
+      message: t('views.login.loginForm.re_password.requiredMessage'),
+      trigger: 'blur',
+    },
+    {
+      min: 6,
+      max: 20,
+      message: t('views.login.loginForm.password.lengthMessage'),
+      trigger: 'blur',
+    },
+    {
+      validator: (rule, value, callback) => {
+        if (resetPasswordForm.value.password != resetPasswordForm.value.re_password) {
+          callback(new Error(t('views.login.loginForm.re_password.validatorMessage')))
+        } else {
+          callback()
+        }
+      },
+      trigger: 'blur',
+    },
+  ],
+})
+const resetPasswordFormRef = ref<FormInstance>()
+const loading = ref<boolean>(false)
+const resetPassword = () => {
+  resetPasswordFormRef.value
+    ?.validate()
+    .then(() => UserApi.resetPassword(resetPasswordForm.value, loading))
+    .then(() => {
+      MsgSuccess(t('common.modifySuccess'))
+      router.push({ name: 'login' })
+    })
+}
+</script>
+<style lang="scss" scoped></style>
diff --git a/ui/src/views/chat/user-login/ResetPassword.vue b/ui/src/views/chat/user-login/ResetPassword.vue
new file mode 100644
index 000000000..f8138c2f8
--- /dev/null
+++ b/ui/src/views/chat/user-login/ResetPassword.vue
@@ -0,0 +1,137 @@
+<template>
+  <UserLoginLayout>
+    <LoginContainer :subTitle="$t('theme.defaultSlogan')">
+      <h2 class="mb-24">{{ $t('views.login.resetPassword') }}</h2>
+      <el-form
+        class="reset-password-form"
+        ref="resetPasswordFormRef"
+        :model="resetPasswordForm"
+        :rules="rules"
+      >
+        <div class="mb-24">
+          <el-form-item prop="password">
+            <el-input
+              type="password"
+              size="large"
+              class="input-item"
+              v-model="resetPasswordForm.password"
+              :placeholder="$t('views.login.loginForm.password.placeholder')"
+              show-password
+            >
+            </el-input>
+          </el-form-item>
+        </div>
+        <div class="mb-24">
+          <el-form-item prop="re_password">
+            <el-input
+              type="password"
+              size="large"
+              class="input-item"
+              v-model="resetPasswordForm.re_password"
+              :placeholder="$t('views.login.loginForm.re_password.placeholder')"
+              show-password
+            >
+            </el-input>
+          </el-form-item>
+        </div>
+      </el-form>
+      <el-button size="large" type="primary" class="w-full" @click="resetPassword">{{
+        $t('common.confirm')
+      }}</el-button>
+      <div class="operate-container mt-12">
+        <el-button
+          size="large"
+          class="register"
+          @click="router.push('/login')"
+          link
+          type="primary"
+          icon="ArrowLeft"
+        >
+          {{ $t('views.login.buttons.backLogin') }}
+        </el-button>
+      </div>
+    </LoginContainer>
+  </UserLoginLayout>
+</template>
+<script setup lang="ts">
+import { ref, onMounted } from 'vue'
+import LoginContainer from '@/layout/login-layout/LoginContainer.vue'
+import UserLoginLayout from '@/layout/login-layout/UserLoginLayout.vue'
+import type { ResetPasswordRequest } from '@/api/type/user'
+import { useRouter, useRoute } from 'vue-router'
+import { MsgSuccess } from '@/utils/message'
+import type { FormInstance, FormRules } from 'element-plus'
+import UserApi from '@/api/user/user-manage'
+import { t } from '@/locales'
+const router = useRouter()
+const route = useRoute()
+const {
+  params: { code, email },
+} = route
+const resetPasswordForm = ref<ResetPasswordRequest>({
+  password: '',
+  re_password: '',
+  email: '',
+  code: '',
+})
+
+onMounted(() => {
+  if (code && email) {
+    resetPasswordForm.value.code = code as string
+    resetPasswordForm.value.email = email as string
+  } else {
+    router.push('forgot_password')
+  }
+})
+
+const rules = ref<FormRules<ResetPasswordRequest>>({
+  password: [
+    {
+      required: true,
+      message: t('views.login.loginForm.re_password.requiredMessage'),
+      trigger: 'blur',
+    },
+    {
+      min: 6,
+      max: 20,
+      message: t('views.login.loginForm.password.lengthMessage'),
+      trigger: 'blur',
+    },
+  ],
+  re_password: [
+    {
+      required: true,
+      message: t('views.login.loginForm.re_password.requiredMessage'),
+      trigger: 'blur',
+    },
+    {
+      min: 6,
+      max: 20,
+      message: t('views.login.loginForm.password.lengthMessage'),
+      trigger: 'blur',
+    },
+    {
+      validator: (rule, value, callback) => {
+        if (resetPasswordForm.value.password != resetPasswordForm.value.re_password) {
+          callback(new Error(t('views.login.loginForm.re_password.validatorMessage')))
+        } else {
+          callback()
+        }
+      },
+      trigger: 'blur',
+    },
+  ],
+})
+const resetPasswordFormRef = ref<FormInstance>()
+const loading = ref<boolean>(false)
+const resetPassword = () => {
+  resetPasswordFormRef.value
+    ?.validate()
+    .then(() => UserApi.resetPassword(resetPasswordForm.value, loading))
+    .then(() => {
+      MsgSuccess(t('common.modifySuccess'))
+      router.push({ name: 'login' })
+    })
+}
+</script>
+<style lang="scss" scoped></style>
diff --git a/ui/src/views/chat/user-login/components/LoginContainer.vue b/ui/src/views/chat/user-login/components/LoginContainer.vue
new file mode 100644
index 000000000..0415bdc96
--- /dev/null
+++ b/ui/src/views/chat/user-login/components/LoginContainer.vue
@@ -0,0 +1,37 @@
+<template>
+  <div class="login-form-container">
+    <div class="login-title">
+      <div class="logo text-center">
+        <LogoFull height="45px" />
+      </div>
+      <div class="sub-title text-center" v-if="subTitle">
+        <el-text type="info">{{ subTitle }}</el-text>
+      </div>
+    </div>
+    <el-card class="login-card">
+      <slot></slot>
+    </el-card>
+  </div>
+</template>
+<script setup lang="ts">
+defineProps({
+  title: String,
+  subTitle: String
+})
+</script>
+<style lang="scss" scoped>
+.login-form-container {
+  width: 480px;
+
+  .login-title {
+    margin-bottom: 32px;
+    .sub-title {
+      font-size: 16px;
+    }
+  }
+  .login-card {
+    border-radius: 8px;
+    padding: 18px;
+  }
+}
+</style>
diff --git a/ui/src/views/chat/user-login/components/LoginLayout.vue b/ui/src/views/chat/user-login/components/LoginLayout.vue
new file mode 100644
index 000000000..8c2150c4e
--- /dev/null
+++ b/ui/src/views/chat/user-login/components/LoginLayout.vue
@@ -0,0 +1,108 @@
+<template>
+  <div class="login-warp flex-center">
+    <div class="login-container w-full h-full">
+      <el-row class="container w-full h-full">
+        <el-col :xs="0" :sm="0" :md="10" :lg="10" :xl="10" class="left-container">
+          <div class="login-image" :style="{ backgroundImage: `url(${loginImage})` }"></div>
+        </el-col>
+        <el-col :xs="24" :sm="24" :md="14" :lg="14" :xl="14" class="right-container flex-center">
+          <el-dropdown trigger="click" type="primary" class="lang" v-if="lang">
+            <template #dropdown>
+              <el-dropdown-menu style="width: 180px">
+                <el-dropdown-item
+                  v-for="(lang, index) in langList"
+                  :key="index"
+                  :value="lang.value"
+                  @click="changeLang(lang.value)"
+                  class="flex-between"
+                >
+                  <span :class="lang.value === user.getLanguage() ? 'primary' : ''">{{
+                    lang.label
+                  }}</span>
+
+                  <el-icon
+                    :class="lang.value === user.getLanguage() ? 'primary' : ''"
+                    v-if="lang.value === user.getLanguage()"
+                  >
+                    <Check />
+                  </el-icon>
+                </el-dropdown-item>
+              </el-dropdown-menu>
+            </template>
+            <el-button>
+              {{ currentLanguage }}<el-icon class="el-icon--right"><arrow-down /></el-icon>
+            </el-button>
+          </el-dropdown>
+          <slot></slot>
+        </el-col>
+      </el-row>
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+import { computed } from 'vue'
+import { getThemeImg } from '@/utils/theme'
+import useStore from '@/stores'
+import { useLocalStorage } from '@vueuse/core'
+import { langList, localeConfigKey, getBrowserLang } from '@/locales/index'
+defineProps({
+  lang: {
+    type: Boolean,
+    default: true,
+  },
+})
+const { user, theme } = useStore()
+
+const changeLang = (lang: string) => {
+  useLocalStorage(localeConfigKey, getBrowserLang()).value = lang
+  window.location.reload()
+}
+
+const currentLanguage = computed(() => {
+  return langList.value?.filter((v: any) => v.value === user.getLanguage())?.[0]?.label
+})
+
+const fileURL = computed(() => {
+  if (theme.themeInfo?.loginImage) {
+    if (typeof theme.themeInfo?.loginImage === 'string') {
+      return theme.themeInfo?.loginImage
+    } else {
+      return URL.createObjectURL(theme.themeInfo?.loginImage)
+    }
+  } else {
+    return ''
+  }
+})
+
+const loginImage = computed(() => {
+  if (theme.themeInfo?.loginImage) {
+    return `${fileURL.value}`
+  } else {
+    const imgName = getThemeImg(theme.themeInfo?.theme)
+    const imgPath = `../../assets/theme/${imgName}.jpg`
+    const imageUrl = new URL(imgPath, import.meta.url).href
+    return imageUrl
+  }
+})
+</script>
+<style lang="scss" scoped>
+.login-warp {
+  height: 100vh;
+
+  .login-image {
+    background-repeat: no-repeat;
+    background-position: center;
+    background-size: cover;
+    width: 100%;
+    height: 100%;
+  }
+  .right-container {
+    position: relative;
+    .lang {
+      position: absolute;
+      right: 20px;
+      top: 20px;
+    }
+  }
+}
+</style>
diff --git a/ui/src/views/chat/user-login/index.vue b/ui/src/views/chat/user-login/index.vue
new file mode 100644
index 000000000..93d42cf07
--- /dev/null
+++ b/ui/src/views/chat/user-login/index.vue
@@ -0,0 +1,450 @@
+<template>
+  <UserLoginLayout v-if="!loading" v-loading="loading">
+    <LoginContainer :subTitle="theme.themeInfo?.slogan || $t('theme.defaultSlogan')">
+      <h2 class="mb-24" v-if="!showQrCodeTab">{{ loginMode || $t('views.login.title') }}</h2>
+      <div v-if="!showQrCodeTab">
+        <el-form
+          class="login-form"
+          :rules="rules"
+          :model="loginForm"
+          ref="loginFormRef"
+          @keyup.enter="login"
+        >
+          <div class="mb-24">
+            <el-form-item prop="username">
+              <el-input
+                size="large"
+                class="input-item"
+                v-model="loginForm.username"
+                :placeholder="$t('views.login.loginForm.username.placeholder')"
+              >
+              </el-input>
+            </el-form-item>
+          </div>
+          <div class="mb-24">
+            <el-form-item prop="password">
+              <el-input
+                type="password"
+                size="large"
+                class="input-item"
+                v-model="loginForm.password"
+                :placeholder="$t('views.login.loginForm.password.placeholder')"
+                show-password
+              >
+              </el-input>
+            </el-form-item>
+          </div>
+          <div class="mb-24" v-if="loginMode !== 'LDAP'">
+            <el-form-item prop="captcha">
+              <div class="flex-between w-full">
+                <el-input
+                  size="large"
+                  class="input-item"
+                  v-model="loginForm.captcha"
+                  :placeholder="$t('views.login.loginForm.captcha.placeholder')"
+                >
+                </el-input>
+
+                <img
+                  :src="identifyCode"
+                  alt=""
+                  height="38"
+                  class="ml-8 cursor border border-r-4"
+                  @click="makeCode"
+                />
+              </div>
+            </el-form-item>
+          </div>
+        </el-form>
+
+        <el-button
+          size="large"
+          type="primary"
+          class="w-full"
+          @click="loginHandle"
+          :loading="loading"
+        >
+          {{ $t('views.login.buttons.login') }}
+        </el-button>
+        <div class="operate-container flex-between mt-12">
+          <el-button
+            :loading="loading"
+            class="forgot-password"
+            @click="router.push('/forgot_password')"
+            link
+            type="primary"
+          >
+            {{ $t('views.login.forgotPassword') }}?
+          </el-button>
+        </div>
+      </div>
+      <div v-if="showQrCodeTab">
+        <QrCodeTab :tabs="orgOptions" />
+      </div>
+      <div class="login-gradient-divider lighter mt-24" v-if="modeList.length > 1">
+        <span>{{ $t('views.login.moreMethod') }}</span>
+      </div>
+      <div class="text-center mt-16">
+        <template v-for="item in modeList">
+          <el-button
+            v-if="item !== '' && loginMode !== item && item !== 'QR_CODE'"
+            circle
+            :key="item"
+            class="login-button-circle color-secondary"
+            @click="changeMode(item)"
+          >
+            <span
+              :style="{
+                'font-size': item === 'OAUTH2' ? '8px' : '10px',
+                color: user.themeInfo?.theme,
+              }"
+              >{{ item }}</span
+            >
+          </el-button>
+          <el-button
+            v-if="item === 'QR_CODE' && loginMode !== item"
+            circle
+            :key="item"
+            class="login-button-circle color-secondary"
+            @click="changeMode('QR_CODE')"
+          >
+            <img src="@/assets/scan/icon_qr_outlined.svg" width="25px" />
+          </el-button>
+          <el-button
+            v-if="item === '' && loginMode !== ''"
+            circle
+            :key="item"
+            class="login-button-circle color-secondary"
+            style="font-size: 24px"
+            icon="UserFilled"
+            @click="changeMode('')"
+          />
+        </template>
+      </div>
+    </LoginContainer>
+  </UserLoginLayout>
+</template>
+<script setup lang="ts">
+import { onMounted, ref, onBeforeMount } 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 UserLoginLayout from '@/layout/login-layout/UserLoginLayout.vue'
+import loginApi from '@/api/user/login'
+import authApi from '@/api/system-settings/auth-setting'
+import { t, getBrowserLang } from '@/locales'
+import useStore from '@/stores'
+import { useI18n } from 'vue-i18n'
+import QrCodeTab from '@/views/login/scanCompinents/QrCodeTab.vue'
+import { MsgConfirm, MsgError } from '@/utils/message.ts'
+import * as dd from 'dingtalk-jsapi'
+import { loadScript } from '@/utils/utils'
+const router = useRouter()
+const { login, user, theme } = useStore()
+const { locale } = useI18n({ useScope: 'global' })
+const loading = ref<boolean>(false)
+
+const identifyCode = ref<string>('')
+
+const loginFormRef = ref<FormInstance>()
+const loginForm = ref<LoginRequest>({
+  username: '',
+  password: '',
+  captcha: '',
+})
+
+const rules = ref<FormRules<LoginRequest>>({
+  username: [
+    {
+      required: true,
+      message: t('views.login.loginForm.username.requiredMessage'),
+      trigger: 'blur',
+    },
+  ],
+  password: [
+    {
+      required: true,
+      message: t('views.login.loginForm.password.requiredMessage'),
+      trigger: 'blur',
+    },
+  ],
+  captcha: [
+    {
+      required: true,
+      message: t('views.login.loginForm.captcha.requiredMessage'),
+      trigger: 'blur',
+    },
+  ],
+})
+
+const loginHandle = () => {
+  loginFormRef.value?.validate().then(() => {
+    if (loginMode.value === 'LDAP') {
+      login.asyncLdapLogin(loginForm.value, loading).then(() => {
+        locale.value = localStorage.getItem('MaxKB-locale') || getBrowserLang() || 'en-US'
+        router.push({ name: 'home' })
+      })
+    } else {
+      login.asyncLogin(loginForm.value, loading).then(() => {
+        locale.value = localStorage.getItem('MaxKB-locale') || getBrowserLang() || 'en-US'
+        localStorage.setItem('workspace_id', 'default')
+        router.push({ name: 'home' })
+      })
+    }
+  })
+}
+
+function makeCode() {
+  loginApi.getCaptcha().then((res: any) => {
+    identifyCode.value = res.data.captcha
+  })
+}
+
+onBeforeMount(() => {
+  makeCode()
+})
+
+const modeList = ref<string[]>([''])
+const QrList = ref<any[]>([''])
+const loginMode = ref('')
+const showQrCodeTab = ref(false)
+
+interface qrOption {
+  key: string
+  value: string
+}
+
+const orgOptions = ref<qrOption[]>([])
+
+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)
+  })
+}
+
+function redirectAuth(authType: string) {
+  if (authType === 'LDAP' || authType === '') {
+    return
+  }
+  authApi.getAuthSetting(authType, loading).then((res: any) => {
+    if (!res.data) {
+      return
+    }
+    MsgConfirm(t('views.login.jump_tip'), '', {
+      confirmButtonText: t('views.login.jump'),
+      cancelButtonText: t('common.cancel'),
+      confirmButtonClass: '',
+    })
+      .then(() => {
+        if (!res.data.config_data) {
+          return
+        }
+        const config = res.data.config_data
+        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
+        }
+      })
+      .catch(() => {})
+  })
+}
+
+function changeMode(val: string) {
+  loginMode.value = val === 'LDAP' ? val : ''
+  if (val === 'QR_CODE') {
+    loginMode.value = val
+    showQrCodeTab.value = true
+    return
+  }
+  showQrCodeTab.value = false
+  loginForm.value = {
+    username: '',
+    password: '',
+    captcha: '',
+  }
+  redirectAuth(val)
+  loginFormRef.value?.clearValidate()
+}
+
+onBeforeMount(() => {
+  loading.value = true
+  user.asyncGetProfile().then((res) => {
+    if (user.isEnterprise()) {
+      user
+        .getAuthType()
+        .then((res) => {
+          //如果结果包含LDAP，把LDAP放在第一个
+          const ldapIndex = res.indexOf('LDAP')
+          if (ldapIndex !== -1) {
+            const [ldap] = res.splice(ldapIndex, 1)
+            res.unshift(ldap)
+          }
+          modeList.value = [...modeList.value, ...res]
+        })
+        .finally(() => (loading.value = false))
+      user
+        .getQrType()
+        .then((res) => {
+          if (res.length > 0) {
+            modeList.value = ['QR_CODE', ...modeList.value]
+            QrList.value = res
+            QrList.value.forEach((item) => {
+              orgOptions.value.push({
+                key: item,
+                value:
+                  item === 'wecom'
+                    ? t('views.system.authentication.scanTheQRCode.wecom')
+                    : item === 'dingtalk'
+                      ? t('views.system.authentication.scanTheQRCode.dingtalk')
+                      : t('views.system.authentication.scanTheQRCode.lark'),
+              })
+            })
+          }
+        })
+        .finally(() => (loading.value = false))
+    } else {
+      loading.value = false
+    }
+  })
+})
+declare const window: any
+
+onMounted(() => {
+  makeCode()
+  const route = useRoute()
+  const currentUrl = ref(route.fullPath)
+  const params = new URLSearchParams(currentUrl.value.split('?')[1])
+  const client = params.get('client')
+
+  const handleDingTalk = () => {
+    const code = params.get('corpId')
+    if (code) {
+      dd.runtime.permission.requestAuthCode({ corpId: code }).then((res) => {
+        console.log('DingTalk client request success:', res)
+        user.dingOauth2Callback(res.code).then(() => {
+          router.push({ name: 'home' })
+        })
+      })
+    }
+  }
+
+  const handleLark = () => {
+    const appId = params.get('appId')
+    const callRequestAuthCode = () => {
+      window.tt?.requestAuthCode({
+        appId: appId,
+        success: (res: any) => {
+          user.larkCallback(res.code).then(() => {
+            router.push({ name: 'home' })
+          })
+        },
+        fail: (error: any) => {
+          MsgError(error)
+        },
+      })
+    }
+
+    loadScript('https://lf-scm-cn.feishucdn.com/lark/op/h5-js-sdk-1.5.35.js', {
+      jsId: 'lark-sdk',
+      forceReload: true,
+    })
+      .then(() => {
+        if (window.tt) {
+          window.tt.requestAccess({
+            appID: appId,
+            scopeList: [],
+            success: (res: any) => {
+              user.larkCallback(res.code).then(() => {
+                router.push({ name: 'home' })
+              })
+            },
+            fail: (error: any) => {
+              const { errno } = error
+              if (errno === 103) {
+                callRequestAuthCode()
+              }
+            },
+          })
+        } else {
+          callRequestAuthCode()
+        }
+      })
+      .catch((error) => {
+        console.error('SDK 加载失败:', error)
+      })
+  }
+
+  switch (client) {
+    case 'dingtalk':
+      handleDingTalk()
+      break
+    case 'lark':
+      handleLark()
+      break
+    default:
+      break
+  }
+})
+</script>
+<style lang="scss" scoped>
+.login-gradient-divider {
+  position: relative;
+  text-align: center;
+  color: var(--el-color-info);
+
+  ::before {
+    content: '';
+    width: 25%;
+    height: 1px;
+    background: linear-gradient(90deg, rgba(222, 224, 227, 0) 0%, #dee0e3 100%);
+    position: absolute;
+    left: 16px;
+    top: 50%;
+  }
+
+  ::after {
+    content: '';
+    width: 25%;
+    height: 1px;
+    background: linear-gradient(90deg, #dee0e3 0%, rgba(222, 224, 227, 0) 100%);
+    position: absolute;
+    right: 16px;
+    top: 50%;
+  }
+}
+
+.login-button-circle {
+  padding: 20px !important;
+  margin: 0 4px;
+  width: 32px;
+  height: 32px;
+  text-align: center;
+}
+</style>
diff --git a/ui/src/views/chat/user-login/scanCompinents/QrCodeTab.vue b/ui/src/views/chat/user-login/scanCompinents/QrCodeTab.vue
new file mode 100644
index 000000000..a7781dd69
--- /dev/null
+++ b/ui/src/views/chat/user-login/scanCompinents/QrCodeTab.vue
@@ -0,0 +1,74 @@
+<template>
+  <el-tabs v-model="activeKey" @tab-change="selectTab">
+    <template v-for="item in tabs" :key="item.key">
+      <el-tab-pane :label="item.value" :name="item.key">
+        <div class="text-center mt-16" v-if="item.key === activeKey">
+          <component
+            :is="defineAsyncComponent(() => import(`./${item.key}QrCode.vue`))"
+            :config="config"
+          />
+        </div>
+      </el-tab-pane>
+    </template>
+  </el-tabs>
+</template>
+
+<script setup lang="ts">
+import { onMounted, ref, defineAsyncComponent } from 'vue'
+import useStore from '@/stores'
+
+interface Tab {
+  key: string
+  value: string
+}
+
+interface PlatformConfig {
+  app_key: string
+  app_secret: string
+  auth_type: string
+  config: any
+}
+
+interface Config {
+  app_key: string
+  app_secret: string
+  corpId?: string
+  agentId?: string
+}
+
+const props = defineProps<{ tabs: Tab[] }>()
+const activeKey = ref('')
+const allConfigs = ref<PlatformConfig[]>([])
+const config = ref<Config>({ app_key: '', app_secret: '' })
+// const logoUrl = ref('')
+const { user } = useStore()
+async function getPlatformInfo() {
+  try {
+    return await user.getQrSource()
+  } catch (error) {
+    return []
+  }
+}
+
+onMounted(async () => {
+  if (props.tabs.length > 0) {
+    activeKey.value = props.tabs[0].key
+  }
+  allConfigs.value = await getPlatformInfo()
+  updateConfig(activeKey.value)
+})
+
+const updateConfig = (key: string) => {
+  const selectedConfig = allConfigs.value.find((item) => item.auth_type === key)
+  if (selectedConfig && selectedConfig.config) {
+    config.value = selectedConfig.config
+  }
+}
+
+const selectTab = (key: string) => {
+  activeKey.value = key
+  updateConfig(key)
+}
+</script>
+
+<style scoped lang="scss"></style>
diff --git a/ui/src/views/chat/user-login/scanCompinents/dingtalkQrCode.vue b/ui/src/views/chat/user-login/scanCompinents/dingtalkQrCode.vue
new file mode 100644
index 000000000..670084d38
--- /dev/null
+++ b/ui/src/views/chat/user-login/scanCompinents/dingtalkQrCode.vue
@@ -0,0 +1,141 @@
+<template>
+  <div class="flex-center mb-16">
+    <img src="@/assets/scan/logo_dingtalk.svg" alt="" width="24px" class="mr-4" />
+    <h2>{{ $t('views.system.authentication.scanTheQRCode.dingtalkQrCode') }}</h2>
+  </div>
+  <div class="ding-talk-qrName">
+    <div id="ding-talk-qr"></div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { useRouter } from 'vue-router'
+import { useScriptTag } from '@vueuse/core'
+import { ref, watch } from 'vue'
+import useStore from '@/stores'
+import { MsgError } from '@/utils/message'
+// 声明 DTFrameLogin 和 QRLogin 的类型
+declare global {
+  interface Window {
+    DTFrameLogin: (
+      frameParams: IDTLoginFrameParams,
+      loginParams: IDTLoginLoginParams,
+      successCbk: (result: IDTLoginSuccess) => void,
+      errorCbk?: (errorMsg: string) => void
+    ) => void
+    QRLogin: (QRLogin: qrLogin) => Record<any, any>
+  }
+}
+
+// 定义接口类型
+interface IDTLoginFrameParams {
+  id: string
+  width?: number
+  height?: number
+}
+
+interface IDTLoginLoginParams {
+  redirect_uri: string
+  response_type: string
+  client_id: string
+  scope: string
+  prompt: string
+  state?: string
+  org_type?: string
+  corpId?: string
+  exclusiveLogin?: string
+  exclusiveCorpId?: string
+}
+
+interface IDTLoginSuccess {
+  redirectUrl: string
+  authCode: string
+  state?: string
+}
+
+interface qrLogin {
+  id: string
+  goto: string
+  width: string
+  height: string
+  style?: string
+}
+
+const props = defineProps<{
+  config: {
+    app_secret: string
+    app_key: string
+    corp_id: string
+  }
+}>()
+
+const router = useRouter()
+const { user } = useStore()
+const { load } = useScriptTag('https://g.alicdn.com/dingding/h5-dingtalk-login/0.21.0/ddlogin.js')
+const isConfigReady = ref(false)
+
+const initActive = async () => {
+  try {
+    await load(true)
+    if (!isConfigReady.value) {
+      return
+    }
+
+    const data = {
+      appKey: props.config.app_key,
+      appSecret: props.config.app_secret,
+      corp_id: props.config.corp_id
+    }
+
+    const redirectUri = encodeURIComponent(window.location.origin)
+    window.DTFrameLogin(
+      {
+        id: 'ding-talk-qr',
+        width: 280,
+        height: 280
+      },
+      {
+        redirect_uri: redirectUri,
+        client_id: data.appKey,
+        scope: 'openid corpid',
+        response_type: 'code',
+        state: 'fit2cloud-ding-qr',
+        prompt: 'consent',
+        corpId: data.corp_id
+      },
+      (loginResult) => {
+        const authCode = loginResult.authCode
+        user.dingCallback(authCode).then(() => {
+          router.push({ name: 'home' })
+        })
+      },
+      (errorMsg: string) => {
+        MsgError(errorMsg)
+      }
+    )
+  } catch (error) {
+    console.error(error)
+  }
+}
+
+watch(
+  () => props.config,
+  (newConfig) => {
+    if (newConfig.app_key && newConfig.corp_id) {
+      isConfigReady.value = true
+      initActive()
+    }
+  },
+  { immediate: true }
+)
+</script>
+
+<style lang="scss">
+.ding-talk-qrName {
+  border: 1px solid #e8e8e8;
+  border-radius: 8px;
+  height: 280px;
+  width: 280px;
+  margin: 0 auto;
+}
+</style>
diff --git a/ui/src/views/chat/user-login/scanCompinents/larkQrCode.vue b/ui/src/views/chat/user-login/scanCompinents/larkQrCode.vue
new file mode 100644
index 000000000..fd4e4fcb4
--- /dev/null
+++ b/ui/src/views/chat/user-login/scanCompinents/larkQrCode.vue
@@ -0,0 +1,59 @@
+<template>
+  <div class="flex-center mb-16">
+    <img src="@/assets/scan/logo_lark.svg " alt="" width="24px" class="mr-4" />
+    <h2>{{ $t('views.system.authentication.scanTheQRCode.larkQrCode') }}</h2>
+  </div>
+  <div id="lark-qr" class="lark-qrName"></div>
+</template>
+
+<script lang="ts" setup>
+import { useScriptTag } from '@vueuse/core'
+import { onMounted } from 'vue'
+
+const { load } = useScriptTag(
+  'https://lf-package-cn.feishucdn.com/obj/feishu-static/lark/passport/qrcode/LarkSSOSDKWebQRCode-1.0.3.js'
+)
+
+const props = defineProps<{
+  config: {
+    app_secret: string
+    app_key: string
+  }
+}>()
+
+const initActive = async () => {
+  const scriptLoaded = await load(true)
+  if (!scriptLoaded) {
+    console.error('飞书二维码 SDK 加载失败')
+    return
+  }
+
+  const data = {
+    agentId: props.config.app_key,
+    appSecret: props.config.app_secret
+  }
+
+  const redirectUrl = encodeURIComponent(`${window.location.origin}/api/feishu`)
+  const url = `https://passport.feishu.cn/suite/passport/oauth/authorize?client_id=${data.agentId}&redirect_uri=${redirectUrl}&response_type=code&state=fit2cloud-lark-qr`
+
+  const QRLoginObj = window.QRLogin({
+    id: 'lark-qr',
+    goto: url,
+    width: '266',
+    height: '266',
+    style: 'width:280px;height:280px;border:1px solid #e8e8e8;margin:0 auto;border-radius:8px;'
+  })
+
+  window.addEventListener('message', async (event: any) => {
+    if (QRLoginObj.matchOrigin(event.origin) && QRLoginObj.matchData(event.data)) {
+      const loginTmpCode = event.data.tmp_code
+      window.location.href = `${url}&tmp_code=${loginTmpCode}`
+    }
+  })
+}
+
+onMounted(() => {
+  initActive()
+})
+</script>
+<style scoped lang="scss"></style>
diff --git a/ui/src/views/chat/user-login/scanCompinents/wecomQrCode.vue b/ui/src/views/chat/user-login/scanCompinents/wecomQrCode.vue
new file mode 100644
index 000000000..d0e639158
--- /dev/null
+++ b/ui/src/views/chat/user-login/scanCompinents/wecomQrCode.vue
@@ -0,0 +1,79 @@
+<template>
+  <div id="wecom-qr" class="wecom-qr" style="margin-left: 50px"></div>
+</template>
+
+<script lang="ts" setup>
+import { useRouter } from 'vue-router'
+import * as ww from '@wecom/jssdk'
+import {
+  WWLoginLangType,
+  WWLoginPanelSizeType,
+  WWLoginRedirectType,
+  WWLoginType
+} from '@wecom/jssdk'
+import { ref, nextTick, defineProps } from 'vue'
+import { MsgError } from '@/utils/message'
+import useStore from '@/stores'
+import { getBrowserLang } from '@/locales'
+const router = useRouter()
+
+const wwLogin = ref({})
+const obj = ref<any>({ isWeComLogin: false })
+const { user } = useStore()
+
+const props = defineProps<{
+  config: {
+    app_secret: string
+    app_key: string
+    corp_id?: string
+    agent_id?: string
+  }
+}>()
+
+const init = async () => {
+  await nextTick() // 确保DOM已更新
+  const data = {
+    corpId: props.config.corp_id,
+    agentId: props.config.agent_id
+  }
+  const lang = localStorage.getItem('MaxKB-locale') || getBrowserLang() || 'en-US'
+  const redirectUri = window.location.origin
+  try {
+    wwLogin.value = ww.createWWLoginPanel({
+      el: '#wecom-qr',
+      params: {
+        login_type: WWLoginType.corpApp,
+        appid: data.corpId || '',
+        agentid: data.agentId,
+        redirect_uri: redirectUri,
+        state: 'fit2cloud-wecom-qr',
+        lang: lang === 'zh-CN' || lang === 'zh-Hant' ? WWLoginLangType.zh : WWLoginLangType.en,
+        redirect_type: WWLoginRedirectType.callback,
+        panel_size: WWLoginPanelSizeType.small
+      },
+      onCheckWeComLogin: obj.value,
+      async onLoginSuccess({ code }: any) {
+        user.wecomCallback(code).then(() => {
+          setTimeout(() => {
+            router.push({ name: 'home' })
+          })
+        })
+      },
+      onLoginFail(err) {
+        MsgError(`${err.errMsg}`)
+      }
+    })
+  } catch (error) {
+    console.error('Error initializing login panel:', error)
+  }
+}
+
+init()
+</script>
+
+<style scoped lang="scss">
+.wecom-qr {
+  margin-top: -20px;
+  height: 331px;
+}
+</style>
diff --git a/ui/src/views/login/ForgotPassword.vue b/ui/src/views/login/ForgotPassword.vue
index 83ff33da1..3ab563136 100644
--- a/ui/src/views/login/ForgotPassword.vue
+++ b/ui/src/views/login/ForgotPassword.vue
@@ -28,7 +28,7 @@
               size="large"
               class="input-item"
               v-model="resetPasswordForm.re_password"
-              :placeholder="$t('views.login.loginForm..re_password.placeholder')"
+              :placeholder="$t('views.login.loginForm.re_password.placeholder')"
               show-password
             >
             </el-input>
@@ -55,6 +55,8 @@
 </template>
 <script setup lang="ts">
 import { ref, onMounted } from 'vue'
+import LoginContainer from '@/layout/login-layout/LoginContainer.vue'
+import LoginLayout from '@/layout/login-layout/LoginLayout.vue'
 import type { ResetPasswordRequest } from '@/api/type/user'
 import { useRouter, useRoute } from 'vue-router'
 import { MsgSuccess } from '@/utils/message'
diff --git a/ui/src/views/login/ResetPassword.vue b/ui/src/views/login/ResetPassword.vue
index c3614f39d..b70abbbdb 100644
--- a/ui/src/views/login/ResetPassword.vue
+++ b/ui/src/views/login/ResetPassword.vue
@@ -55,6 +55,8 @@
 </template>
 <script setup lang="ts">
 import { ref, onMounted } from 'vue'
+import LoginContainer from '@/layout/login-layout/LoginContainer.vue'
+import LoginLayout from '@/layout/login-layout/LoginLayout.vue'
 import type { ResetPasswordRequest } from '@/api/type/user'
 import { useRouter, useRoute } from 'vue-router'
 import { MsgSuccess } from '@/utils/message'
diff --git a/ui/src/views/login/index.vue b/ui/src/views/login/index.vue
index fed3086c3..3dc665466 100644
--- a/ui/src/views/login/index.vue
+++ b/ui/src/views/login/index.vue
@@ -124,8 +124,8 @@ import {onMounted, ref, onBeforeMount} 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 '@/views/login/components/LoginContainer.vue'
-import LoginLayout from '@/views/login/components/LoginLayout.vue'
+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'
diff --git a/ui/src/views/theme/LoginPreview.vue b/ui/src/views/theme/LoginPreview.vue
index f174bde72..ac6a33607 100644
--- a/ui/src/views/theme/LoginPreview.vue
+++ b/ui/src/views/theme/LoginPreview.vue
@@ -53,8 +53,8 @@
 
 <script lang="ts" setup>
 import { computed } from 'vue'
-import LoginLayout from "@/views/login/components/LoginLayout.vue";
-import LoginContainer from "@/views/login/components/LoginContainer.vue";
+import LoginLayout from "@/layout/login-layout/LoginLayout.vue";
+import LoginContainer from "@/layout/login-layout/LoginContainer.vue";
 
 const props = defineProps({
   data: {