diff --git a/src/api/auth.ts b/src/api/auth.ts
index eab43a76..c11bde79 100644
--- a/src/api/auth.ts
+++ b/src/api/auth.ts
@@ -1,4 +1,5 @@
 import { request } from '@/plugins/http-fetch';
+import { sessionGet } from '@/utils/cache-session-utils';
 
 /**
  * 登录方法
@@ -87,3 +88,69 @@ export function getCaptchaImage() {
     whithToken: false,
   });
 }
+
+/**
+ * 登录认证源
+ * @returns object
+ */
+export function getLoginSource() {
+  return request({
+    url: '/auth/login/source',
+    method: 'GET',
+    whithToken: false,
+  });
+}
+
+/**
+ * LDAP登录
+ * @returns object
+ */
+export function loginLDAP(data: Record<string, string>) {
+  return request({
+    url: '/auth/login/ldap',
+    method: 'POST',
+    data: data,
+    whithToken: false,
+  });
+}
+
+/**
+ * SMTP登录
+ * @returns object
+ */
+export function loginSMTP(data: Record<string, string>) {
+  return request({
+    url: '/auth/login/smtp',
+    method: 'POST',
+    data: data,
+    whithToken: false,
+  });
+}
+
+/**
+ * 登录认证源OAuth2跳转登录URL
+ * @returns object
+ */
+export function loginOAuth2URL(state: string): string {
+  // 兼容旧前端可改配置文件
+  const baseUrl = import.meta.env.PROD
+    ? sessionGet('baseUrl') || import.meta.env.VITE_API_BASE_URL
+    : import.meta.env.VITE_API_BASE_URL;
+  return `${baseUrl}/auth/login/oauth2/authorize?state=${state}`;
+}
+
+/**
+ * 登录认证源OAuth2认证登录
+ * @returns object
+ */
+export function loginOAuth2Token(code: string, state: string) {
+  return request({
+    url: '/auth/login/oauth2/token',
+    method: 'POST',
+    data: {
+      code,
+      state,
+    },
+    whithToken: false,
+  });
+}
diff --git a/src/api/system/login-source.ts b/src/api/system/login-source.ts
new file mode 100644
index 00000000..e1d923e8
--- /dev/null
+++ b/src/api/system/login-source.ts
@@ -0,0 +1,64 @@
+import { request } from '@/plugins/http-fetch';
+
+/**
+ * 查询登录源列表
+ * @param query 查询参数
+ * @returns object
+ */
+export function listLoginSource(query: Record<string, any>) {
+  return request({
+    url: '/system/login-source/list',
+    method: 'GET',
+    params: query,
+  });
+}
+
+/**
+ * 查询登录源详细
+ * @param id 登录源ID
+ * @returns object
+ */
+export function getLoginSource(id: string | number) {
+  return request({
+    url: `/system/login-source/${id}`,
+    method: 'GET',
+  });
+}
+
+/**
+ * 新增登录源
+ * @param data 登录源对象
+ * @returns object
+ */
+export function addLoginSource(data: Record<string, any>) {
+  return request({
+    url: '/system/login-source',
+    method: 'POST',
+    data: data,
+  });
+}
+
+/**
+ * 修改登录源
+ * @param data 登录源对象
+ * @returns object
+ */
+export function updateLoginSource(data: Record<string, any>) {
+  return request({
+    url: '/system/login-source',
+    method: 'PUT',
+    data: data,
+  });
+}
+
+/**
+ * 认证源删除
+ * @param id 登录源ID
+ * @returns object
+ */
+export function delLoginSource(id: string | number) {
+  return request({
+    url: `/system/login-source/${id}`,
+    method: 'DELETE',
+  });
+}
diff --git a/src/i18n/locales/en-US.ts b/src/i18n/locales/en-US.ts
index c944ea15..8ca1e802 100644
--- a/src/i18n/locales/en-US.ts
+++ b/src/i18n/locales/en-US.ts
@@ -261,12 +261,16 @@ export default {
     login: {
       tabPane1: 'Account password login',
       tabPane2: 'Login with phone number',
-      registerBtn: 'Register an account',
+      registerBtn: 'Register Account',
       loginBtn: 'Sign In',
       loginSuccess: 'Login Successful',
-      loginMethod: 'Other login methods:',
-      loginMethodWX: 'WeChat Scan Login',
-      loginMethodQQ: 'QQ Scan Code Login',
+      otherMethod: 'Other Methods',
+      backBtn: 'Back',
+      backBtnLogin: 'Return Login',
+      authorizedNotfound: 'Authorized Not Found',
+      authorizedFailed: 'Authorized Failed',
+      authorizedSuccess: 'Authorized Successful',
+      redirectHome: 'Redirect to home page in {i} seconds',
     },
     register: {
       registerBtn: 'Register',
@@ -1704,6 +1708,7 @@ export default {
         userName: 'Nick Name',
         permission: 'Role',
         className: 'Department',
+        userType: 'User Type',
         loginIp: 'Login Address',
         loginTime: 'Login Time',
         status: 'Status',
@@ -1766,6 +1771,55 @@ export default {
         refreshCacheTip: "Are you sure you want to refresh the parameter configuration cache?",
         refreshCacheOk: "Refresh Cache Successful",
       },
+      loginSource: {
+        uid: "UID",
+        name: "Name",
+        namePlease: 'Please enter the authentication source name correctly',
+        icon: "Icon",
+        iconPlease: 'You can enter the image link or upload the image path address',
+        type: "Type",
+        activeFlag: "Status",
+        remark: "Remark",
+        createTime: "Create Time",
+        updateTime: "Update Time",
+        ldapUrl: "Server Address",
+        ldapUrlPlease: 'Please enter the LDAP server address correctly',
+        ldapBaseDN: "Base DN",
+        baseDnPlease: 'Please enter the LDAP base DN correctly',
+        ldapUserFilter: "User Filter",
+        userFilterPlease: 'Please enter the LDAP user filter correctly',
+        ldapBindDN: "Bind DN", 
+        ldapBindPassword: "Bind Password", 
+        smtpHost: 'Server Address',
+        smtpHostPlease: 'Please enter the SMTP server address correctly',
+        smtpPort: 'Port Number',
+        smtpPortPlease: 'Please enter the SMTP port number correctly',
+        oauth2ClientID: 'Client ID',
+        oauth2ClientIDPlease: 'Please enter the OAuth2 client ID correctly',
+        oauth2ClientSecret: 'Client Secret',
+        oauth2ClientSecretPlease: 'Please enter the OAuth2 client secret correctly',
+        oauth2AuthURL: 'Authorization URL',
+        oauth2AuthURLPlease: 'Please enter the OAuth2 authorization URL correctly',
+        oauth2TokenURL: 'Token URL',
+        oauth2TokenURLPlease: 'Please enter the OAuth2 token URL correctly',
+        oauth2UserURL: 'User Info URL',
+        oauth2UserURLPlease: 'Please enter the OAuth2 user info URL correctly',
+        oauth2AccountField: 'Account Field',
+        oauth2AccountFieldPlease: 'Please enter the OAuth2 account field correctly',
+        oauth2Scopes: 'Scopes',
+        oauth2ScopesPlease: 'Please enter the OAuth2 scopes correctly',
+        oauth2RedirectURL: 'Redirect URL',
+        oauth2RedirectURLPlease: 'Please enter the OAuth2 redirect URL correctly',
+        oauth2RedirectURLTip: 'Please jump to the specified path (omchost/#/login/oauth2), redirect with code and state address parameters',
+        uploadFileTip: 'Confirm to upload the authentication source icon?',
+        uploadFileOk: 'Authentication source icon upload successful',
+        uploadFileErr: 'Authentication source icon upload failed',
+        viewInfoErr: "Failed to get authentication source information",
+        addInfo: "Add Authentication Source",
+        editInfo: "Modify Authentication Source", 
+        delTip: "Confirm deleting the authentication source number [{num}] data item?",
+        delOk: "Deleted Successfully",
+      },
       setting: {
         charMaxLen: 'characters length',
         saveSubmit: 'Submit&Save',
diff --git a/src/i18n/locales/zh-CN.ts b/src/i18n/locales/zh-CN.ts
index 532a3a23..d6a830a3 100644
--- a/src/i18n/locales/zh-CN.ts
+++ b/src/i18n/locales/zh-CN.ts
@@ -264,9 +264,13 @@ export default {
       registerBtn: '注册账号',
       loginBtn: '登录',
       loginSuccess: '登录成功',
-      loginMethod: '其他登录方式：',
-      loginMethodWX: '微信扫一扫登录',
-      loginMethodQQ: 'QQ扫码登录',
+      otherMethod: '其他方式',
+      backBtn: '返回',
+      backBtnLogin: '返回登录',
+      authorizedNotfound: '授权无效',
+      authorizedFailed: '授权失败',
+      authorizedSuccess: '授权成功',
+      redirectHome: '{i} 秒后跳转主页',
     },
     register: {
       registerBtn: '注册',
@@ -1702,8 +1706,9 @@ export default {
         userNum: '用户编号',
         account: '登录账号',
         userName: '用户昵称',
-        permission: '用户权限',
+        permission: '用户角色',
         className: '部门名称',
+        userType: '用户类型',
         loginIp: '登录地址',
         loginTime: '登录时间',
         status: '用户状态',
@@ -1766,6 +1771,55 @@ export default {
         refreshCacheTip: "确定要刷新参数配置缓存吗?",
         refreshCacheOk: "刷新缓存成功",
       },
+      loginSource: {
+        uid: "唯一标识",
+        name: "名称",
+        namePlease: '请正确输入认证源名称',
+        icon: "图标",
+        iconPlease: '可填入图片链接或上传图片路径地址',
+        type: "类型",
+        activeFlag: "状态",
+        remark: "备注说明",
+        createTime: "创建时间",
+        updateTime: "更新时间",
+        ldapUrl: "服务器地址",
+        ldapUrlPlease: '请正确输入LDAP 服务器地址',
+        ldapBaseDN: "基础DN",
+        baseDnPlease: '请正确输入LDAP 基础DN',
+        ldapUserFilter: "用户过滤",
+        userFilterPlease: '请正确输入LDAP 用户过滤',
+        ldapBindDN: "绑定DN", 
+        ldapBindPassword: "绑定密码", 
+        smtpHost: '服务器地址',
+        smtpHostPlease: '请正确输入SMTP 服务器地址',
+        smtpPort: '端口号',
+        smtpPortPlease: '请正确输入SMTP 端口号',
+        oauth2ClientID: '客户端ID',
+        oauth2ClientIDPlease: '请正确输入OAuth2 客户端ID',
+        oauth2ClientSecret: '客户端密钥',
+        oauth2ClientSecretPlease: '请正确输入OAuth2 客户端密钥',
+        oauth2AuthURL: '授权URL',
+        oauth2AuthURLPlease: '请正确输入OAuth2 授权URL',
+        oauth2TokenURL: '令牌URL',
+        oauth2TokenURLPlease: '请正确输入OAuth2 令牌URL',
+        oauth2UserURL: '用户信息URL',
+        oauth2UserURLPlease: '请正确输入OAuth2 用户信息URL',
+        oauth2AccountField: '账号字段',
+        oauth2AccountFieldPlease: '请正确输入OAuth2 账号字段',
+        oauth2Scopes: '作用域',
+        oauth2ScopesPlease: '请正确输入OAuth2 作用域',
+        oauth2RedirectURL: '重定向URL',
+        oauth2RedirectURLPlease: '请正确输入OAuth2 重定向URL',
+        oauth2RedirectURLTip: '请跳转指定路径(omchost/#/login/oauth2), 重定向携带code和state地址参数',
+        uploadFileTip: '确认要上传认证源图标吗?',
+        uploadFileOk: '认证源图标上传成功',
+        uploadFileErr: '认证源图标上传失败',
+        viewInfoErr: "获取认证源信息失败",
+        addInfo: "添加认证源",
+        editInfo: "修改认证源", 
+        delTip: "确认删除认证源编号为 【{num}】 的数据项?",
+        delOk: "删除成功",
+      },
       setting: {
         charMaxLen: '位字符长度',
         saveSubmit: '提交保存',
diff --git a/src/layouts/components/RightContent.vue b/src/layouts/components/RightContent.vue
index 7ca4ad41..64b85eb4 100644
--- a/src/layouts/components/RightContent.vue
+++ b/src/layouts/components/RightContent.vue
@@ -80,7 +80,12 @@ function fnChangeLocale(e: any) {
   <a-space :size="12" align="center">
     <a-tooltip placement="bottomRight">
       <template #title>{{ t('loayouts.rightContent.alarm') }}</template>
-      <a-button type="text" style="color: inherit" @click="fnClickAlarm">
+      <a-button
+        type="text"
+        style="color: inherit"
+        @click="fnClickAlarm"
+        v-perms:has="['faultManage:active-alarm:index']"
+      >
         <template #icon>
           <a-badge
             :count="useAlarmStore().activeAlarmTotal"
diff --git a/src/router/index.ts b/src/router/index.ts
index af5b4e2b..725f1c0a 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -49,7 +49,7 @@ router.afterEach((to, from, failure) => {
 /**无Token可访问页面地址白名单 */
 const WHITE_LIST: string[] = [
   '/login',
-  '/auth-redirect',
+  '/login/oauth2',
   '/help',
   '/register',
   '/quick-start',
diff --git a/src/router/routers.ts b/src/router/routers.ts
index 4691b28e..f8bebf91 100644
--- a/src/router/routers.ts
+++ b/src/router/routers.ts
@@ -58,7 +58,7 @@ export const constantRoutes: RouteRecordRaw[] = [
   {
     path: '/trace-task-hlr',
     name: 'TraceTaskHLR', // 跟踪任务HLR
-    meta: { title: 'router.traceTaskHLR', neType: ['UDM','HLR'] },
+    meta: { title: 'router.traceTaskHLR', neType: ['UDM', 'HLR'] },
     component: () => import('@/views/traceManage/task-hlr/index.vue'),
   },
   {
@@ -74,11 +74,16 @@ export const constantRoutes: RouteRecordRaw[] = [
     component: () => import('@/views/tool/lockScreen/index.vue'),
   },
 
+  {
+    path: '/login/oauth2',
+    name: 'LoginOAuth2', // 第三方认证重定向
+    component: () => import('@/views/login/oauth2.vue'),
+  },
   {
     path: '/login',
     name: 'Login', // 登录页
     meta: { title: 'router.login' },
-    component: () => import('@/views/login.vue'),
+    component: () => import('@/views/login/index.vue'),
   },
   {
     path: '/register',
diff --git a/src/store/modules/user.ts b/src/store/modules/user.ts
index 025b1729..7cad9607 100644
--- a/src/store/modules/user.ts
+++ b/src/store/modules/user.ts
@@ -13,7 +13,7 @@ import { parseUrlPath } from '@/plugins/file-static-url';
 
 /**用户信息类型 */
 type UserInfo = {
-  /**用户ID */
+  /**是否强制修改密码 */
   forcePasswdChange: boolean;
   /**用户ID */
   userId: string;
@@ -33,8 +33,8 @@ type UserInfo = {
   email: string;
   /**用户性别 */
   sex: string | undefined;
-  /**其他信息 */
-  profile: Record<string, any>;
+  /**用户类型 */
+  userType: string;
 };
 
 const useUserStore = defineStore('user', {
@@ -49,7 +49,7 @@ const useUserStore = defineStore('user', {
     phone: '',
     email: '',
     sex: undefined,
-    profile: {},
+    userType: 'System',
   }),
   getters: {
     /**
@@ -132,6 +132,7 @@ const useUserStore = defineStore('user', {
         this.phone = user.phone;
         this.email = user.email;
         this.sex = user.sex;
+        this.userType = user.userType;
 
         // 验证返回的roles是否是一个非空数组
         if (Array.isArray(roles) && roles.length > 0) {
diff --git a/src/views/account/settings.vue b/src/views/account/settings.vue
index c406ca30..028bf86a 100644
--- a/src/views/account/settings.vue
+++ b/src/views/account/settings.vue
@@ -6,8 +6,10 @@ import ResetPasswd from './components/reset-passwd.vue';
 import StyleLayout from './components/style-layout.vue';
 import { useRoute } from 'vue-router';
 import useAppStore from '@/store/modules/app';
+import useUserStore from '@/store/modules/user';
 import useI18n from '@/hooks/useI18n';
 const appStore = useAppStore();
+const userStore = useUserStore();
 const route = useRoute();
 const { t } = useI18n();
 
@@ -43,6 +45,7 @@ onActivated(() => {
         <a-tab-pane
           key="reset-passwd"
           :tab="t('views.account.settings.resetPasswd')"
+          v-if="userStore.userType === 'System'"
         >
           <ResetPasswd></ResetPasswd>
         </a-tab-pane>
diff --git a/src/views/login.vue b/src/views/login.vue
deleted file mode 100644
index d01be8c7..00000000
--- a/src/views/login.vue
+++ /dev/null
@@ -1,398 +0,0 @@
-<script lang="ts" setup>
-import svgLight from '@/assets/svg/light.svg';
-import svgDark from '@/assets/svg/dark.svg';
-import { message } from 'ant-design-vue/es';
-import { reactive, onMounted, computed, toRaw } from 'vue';
-import useUserStore from '@/store/modules/user';
-import useAppStore from '@/store/modules/app';
-import { getCaptchaImage } from '@/api/auth';
-import { useRouter, useRoute } from 'vue-router';
-import useI18n from '@/hooks/useI18n';
-import useLayoutStore from '@/store/modules/layout';
-import { viewTransitionTheme } from 'antdv-pro-layout';
-import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
-import { parseUrlPath } from '@/plugins/file-static-url';
-const { t, changeLocale, optionsLocale } = useI18n();
-const layoutStore = useLayoutStore();
-const appStore = useAppStore();
-const router = useRouter();
-const route = useRoute();
-
-let state = reactive({
-  /**表单属性 */
-  from: {
-    /**账号 */
-    username: '',
-    /**密码 */
-    password: '',
-    /**验证码 */
-    code: '',
-    /**验证码uuid */
-    uuid: '',
-  },
-  /**表单提交点击状态 */
-  fromClick: false,
-  /**验证码状态 */
-  captcha: {
-    /**验证码开关 */
-    enabled: false,
-    /**验证码图片地址 */
-    codeImg: '',
-  },
-  /**验证码点击状态 */
-  captchaClick: false,
-});
-
-/**表单验证通过 */
-function fnFinish() {
-  state.fromClick = true;
-  // 发送请求
-  useUserStore()
-    .fnLogin(toRaw(state.from))
-    .then(res => {
-      if (res.code === RESULT_CODE_SUCCESS) {
-        message.success(t('views.login.loginSuccess'), 1);
-        /**登录后重定向页面 */
-        const redirectPath = route.query?.redirect || '/index';
-        router.push({ path: redirectPath as string });
-      } else {
-        message.error(`${res.msg}`, 3);
-      }
-    })
-    .finally(() => {
-      state.fromClick = false;
-      // 刷新验证码
-      if (state.captcha.enabled) {
-        state.from.code = '';
-        fnGetCaptcha();
-      }
-    });
-}
-
-/**
- * 获取验证码
- */
-function fnGetCaptcha() {
-  if (state.captchaClick) return;
-  state.captchaClick = true;
-  getCaptchaImage()
-    .then(res => {
-      if (res.code !== RESULT_CODE_SUCCESS) {
-        message.warning({
-          content: `${res.msg}`,
-          duration: 3,
-        });
-        return;
-      }
-      const { enabled, img, uuid } = res.data;
-      state.captcha.enabled = Boolean(enabled);
-      if (state.captcha.enabled) {
-        state.captcha.codeImg = img;
-        state.from.uuid = uuid;
-      }
-      if (res.data?.text) {
-        state.from.code = res.data.text;
-      }
-    })
-    .finally(() => {
-      state.captchaClick = false;
-    });
-}
-
-// 判断是否有背景地址
-const calcBG = computed(() => {
-  const bgURL = parseUrlPath(appStore.loginBackground);
-  if (bgURL && bgURL !== '#') {
-    return {
-      backgroundImage: `url('${bgURL}')`,
-      backgroundPosition: 'center',
-      backgroundSize: 'cover',
-    };
-  }
-  return undefined;
-});
-
-/**
- * 国际化翻译转换
- */
-function fnLocale() {
-  let title = route.meta.title as string;
-  if (title.indexOf('router.') !== -1) {
-    title = t(title);
-  }
-  appStore.setTitle(title);
-}
-
-/**改变主题色 */
-function fnClickTheme(e: any) {
-  viewTransitionTheme(isDarkMode => {
-    layoutStore.changeConf('theme', isDarkMode ? 'light' : 'dark');
-  }, e);
-}
-
-onMounted(() => {
-  fnLocale();
-  fnGetCaptcha();
-});
-
-/**改变多语言 */
-function fnChangeLocale(e: any) {
-  changeLocale(e.key);
-}
-</script>
-
-<template>
-  <div class="container" :style="calcBG">
-    <section v-show="!calcBG">
-      <div class="animation animation1"></div>
-      <div class="animation animation2"></div>
-      <div class="animation animation3"></div>
-      <div class="animation animation4"></div>
-      <div class="animation animation5"></div>
-    </section>
-
-    <a-card :bordered="false" class="login-card">
-      <div class="title">
-        {{ t('common.title') }}
-      </div>
-      <a-form :model="state.from" name="stateFrom" @finish="fnFinish">
-        <a-form-item
-          name="username"
-          :rules="[
-            {
-              required: true,
-              min: 2,
-              max: 30,
-              message: t('valid.userNamePlease'),
-            },
-          ]"
-        >
-          <a-input
-            v-model:value="state.from.username"
-            size="large"
-            :placeholder="t('valid.userNameHit')"
-            :maxlength="30"
-          >
-            <template #prefix>
-              <UserOutlined class="prefix-icon" />
-            </template>
-          </a-input>
-        </a-form-item>
-
-        <a-form-item
-          name="password"
-          :rules="[
-            {
-              required: true,
-              min: 6,
-              max: 26,
-              message: t('valid.passwordPlease'),
-            },
-          ]"
-        >
-          <a-input-password
-            v-model:value="state.from.password"
-            size="large"
-            :placeholder="t('valid.passwordHit')"
-            :maxlength="26"
-          >
-            <template #prefix>
-              <LockOutlined class="prefix-icon" />
-            </template>
-          </a-input-password>
-        </a-form-item>
-
-        <a-row v-if="state.captcha.enabled">
-          <a-col :span="16">
-            <a-form-item
-              name="code"
-              :rules="[
-                {
-                  required: true,
-                  min: 1,
-                  message: t('valid.codePlease'),
-                },
-              ]"
-            >
-              <a-input
-                v-model:value="state.from.code"
-                size="large"
-                :placeholder="t('valid.codeHit')"
-                :maxlength="6"
-              >
-                <template #prefix>
-                  <RobotOutlined class="prefix-icon" />
-                </template>
-              </a-input>
-            </a-form-item>
-          </a-col>
-          <a-col :span="8">
-            <a-image
-              :alt="t('valid.codeHit')"
-              style="cursor: pointer; border-radius: 2px"
-              width="100px"
-              height="40px"
-              :preview="false"
-              :src="state.captcha.codeImg"
-              @click="fnGetCaptcha"
-            />
-          </a-col>
-        </a-row>
-
-        <a-row
-          justify="space-between"
-          align="middle"
-          style="margin-bottom: 16px"
-        >
-          <a-col :span="12" v-if="appStore.registerUser">
-            <a-button
-              type="link"
-              target="_self"
-              :title="t('views.login.registerBtn')"
-              @click="() => router.push({ name: 'Register' })"
-            >
-              {{ t('views.login.registerBtn') }}
-            </a-button>
-          </a-col>
-        </a-row>
-
-        <a-button
-          block
-          type="primary"
-          size="large"
-          html-type="submit"
-          :loading="state.fromClick"
-        >
-          {{ t('views.login.loginBtn') }}
-        </a-button>
-
-        <a-row justify="end" align="middle" style="margin-top: 18px">
-          <a-col :span="3">
-            <a-tooltip placement="bottomRight">
-              <template #title>{{ t('loayouts.rightContent.theme') }}</template>
-              <a-button type="text" @click="fnClickTheme">
-                <template #icon>
-                  <img
-                    v-if="layoutStore.proConfig.theme === 'dark'"
-                    :src="svgDark"
-                    class="theme-icon"
-                  />
-                  <img v-else :src="svgLight" class="theme-icon" />
-                </template>
-              </a-button>
-            </a-tooltip>
-          </a-col>
-          <a-col :span="3" v-if="appStore.i18nOpen">
-            <a-dropdown trigger="click" placement="bottomRight">
-              <a-button type="text">
-                <template #icon> <TranslationOutlined /> </template>
-              </a-button>
-              <template #overlay>
-                <a-menu @click="fnChangeLocale">
-                  <a-menu-item v-for="opt in optionsLocale" :key="opt.value">
-                    {{ opt.label }}
-                  </a-menu-item>
-                </a-menu>
-              </template>
-            </a-dropdown>
-          </a-col>
-        </a-row>
-      </a-form>
-    </a-card>
-  </div>
-</template>
-
-<style lang="less" scoped>
-.container {
-  position: relative;
-  width: 100%;
-  min-height: 100%;
-  padding-top: 164px;
-
-  // background: url('./../assets/black_dot.png') 0% 0% / 14px 14px repeat;
-
-  background-image: url(/background/light.jpg);
-  background-repeat: no-repeat;
-  background-size: cover;
-  background-position: center center;
-
-  .animation {
-    position: absolute;
-    width: 6px;
-    height: 6px;
-    border-radius: 50%;
-    background-color: #1be1f6;
-
-    &.animation1 {
-      left: 15%;
-      top: 70%;
-      animation: slashStar 2s ease-in-out 0.3s infinite;
-    }
-    &.animation2 {
-      left: 34%;
-      top: 35%;
-      animation: slashStar 2s ease-in-out 1.2s infinite;
-    }
-    &.animation3 {
-      left: 10%;
-      top: 8%;
-      animation: slashStar 2s ease-in-out 0.5s infinite;
-    }
-    &.animation4 {
-      left: 68%;
-      top: 68%;
-      animation: slashStar 2s ease-in-out 0.8s infinite;
-    }
-    &.animation5 {
-      left: 87%;
-      top: 30%;
-      animation: slashStar 2s ease-in-out 1.5s infinite;
-    }
-  }
-  @keyframes slashStar {
-    0% {
-      opacity: 1;
-    }
-    100% {
-      opacity: 0;
-    }
-  }
-}
-
-[data-theme='dark'] .container {
-  background-image: url(/background/dark.jpg);
-  background-color: #141414;
-}
-
-.login-card {
-  width: 368px;
-  min-width: 260px;
-  margin: 0 auto;
-  margin-left: 60%;
-  border-radius: 6px;
-
-  & .title {
-    text-align: left;
-    margin-bottom: 18px;
-    color: #141414;
-    font-weight: 600;
-    font-size: 18px;
-  }
-  & .prefix-icon {
-    color: #8c8c8c;
-    font-size: 16px;
-  }
-}
-
-[data-theme='dark'] .login-card {
-  & .title {
-    color: #999;
-  }
-}
-
-@media (max-width: 992px) {
-  .login-card {
-    margin: 0 auto;
-  }
-}
-</style>
diff --git a/src/views/login/components/CardLogin.vue b/src/views/login/components/CardLogin.vue
new file mode 100644
index 00000000..7aa6c265
--- /dev/null
+++ b/src/views/login/components/CardLogin.vue
@@ -0,0 +1,339 @@
+<script setup lang="ts">
+import svgLight from '@/assets/svg/light.svg';
+import svgDark from '@/assets/svg/dark.svg';
+import { reactive, toRaw, onMounted } from 'vue';
+import { message } from 'ant-design-vue';
+import { viewTransitionTheme } from 'antdv-pro-layout';
+import { useRouter, useRoute } from 'vue-router';
+import useI18n from '@/hooks/useI18n';
+import useUserStore from '@/store/modules/user';
+import useAppStore from '@/store/modules/app';
+import useLayoutStore from '@/store/modules/layout';
+import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
+import { getCaptchaImage } from '@/api/auth';
+import {
+  loginSourceState,
+  fnClickLoginSource,
+} from '@/views/login/hooks/useLoginSource';
+const { t, changeLocale, optionsLocale } = useI18n();
+const layoutStore = useLayoutStore();
+const appStore = useAppStore();
+const router = useRouter();
+const route = useRoute();
+
+let state = reactive({
+  /**表单属性 */
+  from: {
+    /**账号 */
+    username: '',
+    /**密码 */
+    password: '',
+    /**验证码 */
+    code: '',
+    /**验证码uuid */
+    uuid: '',
+  },
+  /**表单提交点击状态 */
+  fromClick: false,
+  /**验证码状态 */
+  captcha: {
+    /**验证码开关 */
+    enabled: false,
+    /**验证码图片地址 */
+    codeImg: '',
+  },
+  /**验证码点击状态 */
+  captchaClick: false,
+});
+
+/**表单验证通过 */
+function fnFinish() {
+  state.fromClick = true;
+  // 发送请求
+  useUserStore()
+    .fnLogin(toRaw(state.from))
+    .then(res => {
+      if (res.code === RESULT_CODE_SUCCESS) {
+        message.success(t('views.login.loginSuccess'), 1);
+        /**登录后重定向页面 */
+        const redirectPath = route.query?.redirect || '/index';
+        router.push({ path: redirectPath as string });
+      } else {
+        message.error(`${res.msg}`, 3);
+      }
+    })
+    .finally(() => {
+      state.fromClick = false;
+      // 刷新验证码
+      if (state.captcha.enabled) {
+        state.from.code = '';
+        fnGetCaptcha();
+      }
+    });
+}
+
+/**
+ * 获取验证码
+ */
+function fnGetCaptcha() {
+  if (state.captchaClick) return;
+  state.captchaClick = true;
+  getCaptchaImage()
+    .then(res => {
+      if (res.code !== RESULT_CODE_SUCCESS) {
+        message.warning({
+          content: `${res.msg}`,
+          duration: 3,
+        });
+        return;
+      }
+      const { enabled, img, uuid } = res.data;
+      state.captcha.enabled = Boolean(enabled);
+      if (state.captcha.enabled) {
+        state.captcha.codeImg = img;
+        state.from.uuid = uuid;
+      }
+      if (res.data?.text) {
+        state.from.code = res.data.text;
+      }
+    })
+    .finally(() => {
+      state.captchaClick = false;
+    });
+}
+
+/**
+ * 国际化翻译转换
+ */
+function fnLocale() {
+  let title = route.meta.title as string;
+  if (title.indexOf('router.') !== -1) {
+    title = t(title);
+  }
+  appStore.setTitle(title);
+}
+
+/**改变主题色 */
+function fnClickTheme(e: any) {
+  viewTransitionTheme(isDarkMode => {
+    layoutStore.changeConf('theme', isDarkMode ? 'light' : 'dark');
+  }, e);
+}
+
+/**改变多语言 */
+function fnChangeLocale(e: any) {
+  changeLocale(e.key);
+}
+
+onMounted(() => {
+  fnLocale();
+  fnGetCaptcha();
+});
+</script>
+
+<template>
+  <a-card :bordered="false" class="login-card">
+    <div class="title">
+      {{ t('common.title') }}
+    </div>
+    <a-form :model="state.from" name="stateFrom" @finish="fnFinish">
+      <a-form-item
+        name="username"
+        :rules="[
+          {
+            required: true,
+            min: 2,
+            max: 30,
+            message: t('valid.userNamePlease'),
+          },
+        ]"
+      >
+        <a-input
+          v-model:value="state.from.username"
+          size="large"
+          :placeholder="t('valid.userNameHit')"
+          :maxlength="30"
+        >
+          <template #prefix>
+            <UserOutlined class="prefix-icon" />
+          </template>
+        </a-input>
+      </a-form-item>
+
+      <a-form-item
+        name="password"
+        :rules="[
+          {
+            required: true,
+            min: 6,
+            max: 26,
+            message: t('valid.passwordPlease'),
+          },
+        ]"
+      >
+        <a-input-password
+          v-model:value="state.from.password"
+          size="large"
+          :placeholder="t('valid.passwordHit')"
+          :maxlength="26"
+        >
+          <template #prefix>
+            <LockOutlined class="prefix-icon" />
+          </template>
+        </a-input-password>
+      </a-form-item>
+
+      <a-row v-if="state.captcha.enabled">
+        <a-col :span="16">
+          <a-form-item
+            name="code"
+            :rules="[
+              {
+                required: true,
+                min: 1,
+                message: t('valid.codePlease'),
+              },
+            ]"
+          >
+            <a-input
+              v-model:value="state.from.code"
+              size="large"
+              :placeholder="t('valid.codeHit')"
+              :maxlength="6"
+            >
+              <template #prefix>
+                <RobotOutlined class="prefix-icon" />
+              </template>
+            </a-input>
+          </a-form-item>
+        </a-col>
+        <a-col :span="8">
+          <a-image
+            :alt="t('valid.codeHit')"
+            style="cursor: pointer; border-radius: 2px"
+            width="100px"
+            height="40px"
+            :preview="false"
+            :src="state.captcha.codeImg"
+            @click="fnGetCaptcha"
+          />
+        </a-col>
+      </a-row>
+
+      <a-button
+        block
+        type="primary"
+        size="large"
+        html-type="submit"
+        :loading="state.fromClick"
+      >
+        {{ t('views.login.loginBtn') }}
+      </a-button>
+
+      <template v-if="loginSourceState.list.length > 0">
+        <a-divider :plain="true">
+          {{ t('views.login.otherMethod') }}
+        </a-divider>
+        <a-row
+          justify="center"
+          align="middle"
+          :wrap="false"
+          :gutter="16"
+          style="margin-top: 18px"
+        >
+          <a-col v-for="s in loginSourceState.list" :key="s.uid">
+            <a-tooltip placement="top">
+              <template #title>{{ s.name }}</template>
+              <a-button
+                type="text"
+                shape="circle"
+                @click="fnClickLoginSource(s)"
+              >
+                <template #icon>
+                  <a-avatar v-if="s.icon" :src="s.icon" :alt="s.name" />
+                  <a-avatar v-else :alt="s.name">{{ s.name }}</a-avatar>
+                </template>
+              </a-button>
+            </a-tooltip>
+          </a-col>
+        </a-row>
+      </template>
+
+      <a-row justify="end" align="middle" style="margin-top: 18px">
+        <a-col :span="12" v-if="appStore.registerUser">
+          <a-button
+            type="link"
+            target="_self"
+            :title="t('views.login.registerBtn')"
+            @click="() => router.push({ name: 'Register' })"
+          >
+            {{ t('views.login.registerBtn') }}
+          </a-button>
+        </a-col>
+        <a-col :span="3" v-if="appStore.i18nOpen">
+          <a-dropdown trigger="click" placement="bottomRight">
+            <a-button type="text">
+              <template #icon> <TranslationOutlined /> </template>
+            </a-button>
+            <template #overlay>
+              <a-menu @click="fnChangeLocale">
+                <a-menu-item v-for="opt in optionsLocale" :key="opt.value">
+                  {{ opt.label }}
+                </a-menu-item>
+              </a-menu>
+            </template>
+          </a-dropdown>
+        </a-col>
+        <a-col :span="3">
+          <a-tooltip placement="bottomRight">
+            <template #title>{{ t('loayouts.rightContent.theme') }}</template>
+            <a-button type="text" @click="fnClickTheme">
+              <template #icon>
+                <img
+                  v-if="layoutStore.proConfig.theme === 'dark'"
+                  :src="svgDark"
+                  class="theme-icon"
+                />
+                <img v-else :src="svgLight" class="theme-icon" />
+              </template>
+            </a-button>
+          </a-tooltip>
+        </a-col>
+      </a-row>
+    </a-form>
+  </a-card>
+</template>
+
+<style lang="less" scoped>
+.login-card {
+  width: 368px;
+  min-width: 260px;
+  margin: 0 auto;
+  margin-left: 60%;
+  border-radius: 6px;
+
+  & .title {
+    text-align: left;
+    margin-bottom: 18px;
+    color: #141414;
+    font-weight: 600;
+    font-size: 18px;
+  }
+  & .prefix-icon {
+    color: #8c8c8c;
+    font-size: 16px;
+  }
+}
+
+[data-theme='dark'] .login-card {
+  & .title {
+    color: #999;
+  }
+}
+
+@media (max-width: 992px) {
+  .login-card {
+    margin: 0 auto;
+  }
+}
+</style>
diff --git a/src/views/login/components/CardLoginForLDAP.vue b/src/views/login/components/CardLoginForLDAP.vue
new file mode 100644
index 00000000..31eb019c
--- /dev/null
+++ b/src/views/login/components/CardLoginForLDAP.vue
@@ -0,0 +1,163 @@
+<script setup lang="ts">
+import { reactive, toRaw } from 'vue';
+import { message } from 'ant-design-vue';
+import { useRouter, useRoute } from 'vue-router';
+import useI18n from '@/hooks/useI18n';
+import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
+import { loginLDAP } from '@/api/auth';
+import {
+  loginSourceState,
+  fnClickLoginBack,
+} from '@/views/login/hooks/useLoginSource';
+import { setAccessToken, setRefreshToken } from '@/plugins/auth-token';
+
+const { t } = useI18n();
+const router = useRouter();
+const route = useRoute();
+
+let state = reactive({
+  /**表单属性 */
+  from: {
+    /**账号 */
+    username: '',
+    /**密码 */
+    password: '',
+    /**认证uid */
+    uid: loginSourceState.selct.uid,
+  },
+  /**表单提交点击状态 */
+  fromClick: false,
+});
+
+/**表单验证通过 */
+function fnFinish() {
+  state.fromClick = true;
+  // 发送请求
+  loginLDAP(toRaw(state.from))
+    .then(res => {
+      if (res.code === RESULT_CODE_SUCCESS) {
+        message.success(t('views.login.loginSuccess'), 1);
+        setAccessToken(res.data.accessToken, res.data.refreshExpiresIn);
+        setRefreshToken(res.data.refreshToken, res.data.refreshExpiresIn);
+        /**登录后重定向页面 */
+        const redirectPath = route.query?.redirect || '/index';
+        router.push({ path: redirectPath as string });
+      } else {
+        message.error(`${res.msg}`, 3);
+      }
+    })
+    .finally(() => {
+      state.fromClick = false;
+    });
+}
+</script>
+
+<template>
+  <a-card :bordered="false" class="login-card">
+    <div class="title">
+      {{ loginSourceState.selct.name }}
+    </div>
+
+    <a-form :model="state.from" name="stateFrom" @finish="fnFinish">
+      <a-form-item
+        name="username"
+        :rules="[
+          {
+            required: true,
+            min: 2,
+            max: 30,
+            message: t('valid.userNamePlease'),
+          },
+        ]"
+      >
+        <a-input
+          v-model:value="state.from.username"
+          size="large"
+          :placeholder="t('valid.userNameHit')"
+          :maxlength="30"
+        >
+          <template #prefix>
+            <UserOutlined class="prefix-icon" />
+          </template>
+        </a-input>
+      </a-form-item>
+
+      <a-form-item
+        name="password"
+        :rules="[
+          {
+            required: true,
+            min: 6,
+            max: 26,
+            message: t('valid.passwordPlease'),
+          },
+        ]"
+      >
+        <a-input-password
+          v-model:value="state.from.password"
+          size="large"
+          :placeholder="t('valid.passwordHit')"
+          :maxlength="26"
+        >
+          <template #prefix>
+            <LockOutlined class="prefix-icon" />
+          </template>
+        </a-input-password>
+      </a-form-item>
+
+      <a-button
+        block
+        type="primary"
+        size="large"
+        html-type="submit"
+        :loading="state.fromClick"
+      >
+        {{ t('views.login.loginBtn') }}
+      </a-button>
+
+      <a-button
+        block
+        size="large"
+        :disabled="state.fromClick"
+        style="margin-top: 24px"
+        @click="fnClickLoginBack"
+      >
+        {{ t('views.login.backBtn') }}
+      </a-button>
+    </a-form>
+  </a-card>
+</template>
+
+<style lang="less" scoped>
+.login-card {
+  width: 368px;
+  min-width: 260px;
+  margin: 0 auto;
+  margin-left: 60%;
+  border-radius: 6px;
+
+  & .title {
+    text-align: left;
+    margin-bottom: 18px;
+    color: #141414;
+    font-weight: 600;
+    font-size: 18px;
+  }
+  & .prefix-icon {
+    color: #8c8c8c;
+    font-size: 16px;
+  }
+}
+
+[data-theme='dark'] .login-card {
+  & .title {
+    color: #999;
+  }
+}
+
+@media (max-width: 992px) {
+  .login-card {
+    margin: 0 auto;
+  }
+}
+</style>
diff --git a/src/views/login/components/CardLoginForSMTP.vue b/src/views/login/components/CardLoginForSMTP.vue
new file mode 100644
index 00000000..ca5eb6b6
--- /dev/null
+++ b/src/views/login/components/CardLoginForSMTP.vue
@@ -0,0 +1,163 @@
+<script setup lang="ts">
+import { reactive, toRaw } from 'vue';
+import { message } from 'ant-design-vue';
+import { useRouter, useRoute } from 'vue-router';
+import useI18n from '@/hooks/useI18n';
+import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
+import { loginSMTP } from '@/api/auth';
+import {
+  loginSourceState,
+  fnClickLoginBack,
+} from '@/views/login/hooks/useLoginSource';
+import { setAccessToken, setRefreshToken } from '@/plugins/auth-token';
+
+const { t } = useI18n();
+const router = useRouter();
+const route = useRoute();
+
+let state = reactive({
+  /**表单属性 */
+  from: {
+    /**账号 */
+    username: '',
+    /**密码 */
+    password: '',
+    /**认证uid */
+    uid: loginSourceState.selct.uid,
+  },
+  /**表单提交点击状态 */
+  fromClick: false,
+});
+
+/**表单验证通过 */
+function fnFinish() {
+  state.fromClick = true;
+  // 发送请求
+  loginSMTP(toRaw(state.from))
+    .then(res => {
+      if (res.code === RESULT_CODE_SUCCESS) {
+        message.success(t('views.login.loginSuccess'), 1);
+        setAccessToken(res.data.accessToken, res.data.refreshExpiresIn);
+        setRefreshToken(res.data.refreshToken, res.data.refreshExpiresIn);
+        /**登录后重定向页面 */
+        const redirectPath = route.query?.redirect || '/index';
+        router.push({ path: redirectPath as string });
+      } else {
+        message.error(`${res.msg}`, 3);
+      }
+    })
+    .finally(() => {
+      state.fromClick = false;
+    });
+}
+</script>
+
+<template>
+  <a-card :bordered="false" class="login-card">
+    <div class="title">
+      {{ loginSourceState.selct.name }}
+    </div>
+
+    <a-form :model="state.from" name="stateFrom" @finish="fnFinish">
+      <a-form-item
+        name="username"
+        :rules="[
+          {
+            required: true,
+            min: 2,
+            max: 30,
+            message: t('valid.userNamePlease'),
+          },
+        ]"
+      >
+        <a-input
+          v-model:value="state.from.username"
+          size="large"
+          :placeholder="t('valid.userNameHit')"
+          :maxlength="30"
+        >
+          <template #prefix>
+            <UserOutlined class="prefix-icon" />
+          </template>
+        </a-input>
+      </a-form-item>
+
+      <a-form-item
+        name="password"
+        :rules="[
+          {
+            required: true,
+            min: 6,
+            max: 26,
+            message: t('valid.passwordPlease'),
+          },
+        ]"
+      >
+        <a-input-password
+          v-model:value="state.from.password"
+          size="large"
+          :placeholder="t('valid.passwordHit')"
+          :maxlength="26"
+        >
+          <template #prefix>
+            <LockOutlined class="prefix-icon" />
+          </template>
+        </a-input-password>
+      </a-form-item>
+
+      <a-button
+        block
+        type="primary"
+        size="large"
+        html-type="submit"
+        :loading="state.fromClick"
+      >
+        {{ t('views.login.loginBtn') }}
+      </a-button>
+
+      <a-button
+        block
+        size="large"
+        :disabled="state.fromClick"
+        style="margin-top: 24px"
+        @click="fnClickLoginBack"
+      >
+        {{ t('views.login.backBtn') }}
+      </a-button>
+    </a-form>
+  </a-card>
+</template>
+
+<style lang="less" scoped>
+.login-card {
+  width: 368px;
+  min-width: 260px;
+  margin: 0 auto;
+  margin-left: 60%;
+  border-radius: 6px;
+
+  & .title {
+    text-align: left;
+    margin-bottom: 18px;
+    color: #141414;
+    font-weight: 600;
+    font-size: 18px;
+  }
+  & .prefix-icon {
+    color: #8c8c8c;
+    font-size: 16px;
+  }
+}
+
+[data-theme='dark'] .login-card {
+  & .title {
+    color: #999;
+  }
+}
+
+@media (max-width: 992px) {
+  .login-card {
+    margin: 0 auto;
+  }
+}
+</style>
diff --git a/src/views/login/hooks/useLoginSource.ts b/src/views/login/hooks/useLoginSource.ts
new file mode 100644
index 00000000..eab23d2d
--- /dev/null
+++ b/src/views/login/hooks/useLoginSource.ts
@@ -0,0 +1,82 @@
+import { getLoginSource, loginOAuth2URL } from '@/api/auth';
+import { parseUrlPath } from '@/plugins/file-static-url';
+import { defineAsyncComponent, nextTick, reactive, shallowRef } from 'vue';
+
+// 异步加载组件
+const cardLogin = defineAsyncComponent(
+  () => import('../components/CardLogin.vue')
+);
+
+// 当前组件
+export const currentComponent = shallowRef(cardLogin);
+
+/**登录认证源类型 */
+type LoginSourceType = {
+  /**认证标识 */
+  uid: string;
+  /**名称 */
+  name: string;
+  /**类型 */
+  type: string;
+  /**图标 */
+  icon: string;
+};
+
+/**登录认证源 */
+export const loginSourceState = reactive({
+  list: [] as LoginSourceType[],
+  selct: {
+    uid: '',
+    name: '',
+    type: '',
+    icon: '',
+  },
+});
+
+/**获取登录认证源 */
+export function fnGetLoginSource() {
+  getLoginSource().then(res => {
+    loginSourceState.list = res.data.map((item: Record<string, string>) => ({
+      ...item,
+      icon: parseUrlPath(item.icon),
+    }));
+  });
+}
+
+/**点击登录认证源 */
+export function fnClickLoginSource(item: LoginSourceType) {
+  loginSourceState.selct = { ...item };
+
+  let loadComponent: any = undefined;
+  switch (item.type) {
+    case 'LDAP':
+      loadComponent = defineAsyncComponent(
+        () => import('../components/CardLoginForLDAP.vue')
+      );
+      break;
+    case 'SMTP':
+      loadComponent = defineAsyncComponent(
+        () => import('../components/CardLoginForSMTP.vue')
+      );
+      break;
+    case 'OAuth2':
+      const redirectUri = loginOAuth2URL(item.uid);
+      window.location.href = redirectUri;
+      // window.open(redirectUri, '_blank');
+      break;
+    default:
+      fnClickLoginBack();
+  }
+  if (loadComponent) {
+    nextTick(() => {
+      currentComponent.value = loadComponent;
+    });
+  }
+}
+
+/**点击登录返回 */
+export function fnClickLoginBack() {
+  nextTick(() => {
+    currentComponent.value = cardLogin;
+  });
+}
diff --git a/src/views/login/index.vue b/src/views/login/index.vue
new file mode 100644
index 00000000..505a2dcd
--- /dev/null
+++ b/src/views/login/index.vue
@@ -0,0 +1,105 @@
+<script lang="ts" setup>
+import { computed, onMounted } from 'vue';
+import useAppStore from '@/store/modules/app';
+import { parseUrlPath } from '@/plugins/file-static-url';
+import {
+  currentComponent,
+  fnGetLoginSource,
+} from '@/views/login/hooks/useLoginSource';
+const appStore = useAppStore();
+
+// 判断是否有背景地址
+const calcBG = computed(() => {
+  const bgURL = parseUrlPath(appStore.loginBackground);
+  if (bgURL && bgURL !== '#') {
+    return {
+      backgroundImage: `url('${bgURL}')`,
+      backgroundPosition: 'center',
+      backgroundSize: 'cover',
+    };
+  }
+  return undefined;
+});
+
+onMounted(() => {
+  // 获取登录认证源
+  fnGetLoginSource();
+});
+</script>
+
+<template>
+  <div class="container" :style="calcBG">
+    <section v-show="!calcBG">
+      <div class="animation animation1"></div>
+      <div class="animation animation2"></div>
+      <div class="animation animation3"></div>
+      <div class="animation animation4"></div>
+      <div class="animation animation5"></div>
+    </section>
+
+    <component :is="currentComponent" />
+  </div>
+</template>
+
+<style lang="less" scoped>
+.container {
+  position: relative;
+  width: 100%;
+  min-height: 100%;
+  padding-top: 164px;
+
+  // background: url('./../assets/black_dot.png') 0% 0% / 14px 14px repeat;
+
+  background-image: url(/background/light.jpg);
+  background-repeat: no-repeat;
+  background-size: cover;
+  background-position: center center;
+
+  .animation {
+    position: absolute;
+    width: 6px;
+    height: 6px;
+    border-radius: 50%;
+    background-color: #1be1f6;
+
+    &.animation1 {
+      left: 15%;
+      top: 70%;
+      animation: slashStar 2s ease-in-out 0.3s infinite;
+    }
+    &.animation2 {
+      left: 34%;
+      top: 35%;
+      animation: slashStar 2s ease-in-out 1.2s infinite;
+    }
+    &.animation3 {
+      left: 10%;
+      top: 8%;
+      animation: slashStar 2s ease-in-out 0.5s infinite;
+    }
+    &.animation4 {
+      left: 68%;
+      top: 68%;
+      animation: slashStar 2s ease-in-out 0.8s infinite;
+    }
+    &.animation5 {
+      left: 87%;
+      top: 30%;
+      animation: slashStar 2s ease-in-out 1.5s infinite;
+    }
+  }
+  @keyframes slashStar {
+    0% {
+      opacity: 1;
+    }
+    100% {
+      opacity: 0;
+    }
+  }
+}
+
+[data-theme='dark'] .container {
+  background-image: url(/background/dark.jpg);
+  background-color: #141414;
+}
+</style>
diff --git a/src/views/login/oauth2.vue b/src/views/login/oauth2.vue
new file mode 100644
index 00000000..f1ec9cd1
--- /dev/null
+++ b/src/views/login/oauth2.vue
@@ -0,0 +1,85 @@
+<script setup lang="ts">
+import { onMounted, reactive } from 'vue';
+import { useRouter } from 'vue-router';
+import useI18n from '@/hooks/useI18n';
+import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
+import {
+  delAccessToken,
+  delRefreshToken,
+  setAccessToken,
+  setRefreshToken,
+} from '@/plugins/auth-token';
+import { loginOAuth2Token } from '@/api/auth';
+const router = useRouter();
+const { t } = useI18n();
+
+const info = reactive({
+  status: 'warning' as 'error' | 'warning' | 'success',
+  title: t('views.login.authorizedNotfound'),
+  subTitle: '',
+});
+
+function fnToLogin() {
+  router.replace({ name: 'Login' }).finally(() => {
+    delAccessToken();
+    delRefreshToken();
+    location.replace(location.origin);
+  });
+}
+
+onMounted(() => {
+  // 从URL参数中获取code和state
+  const params = new URLSearchParams(location.search);
+  const code = params.get('code');
+  const state = params.get('state');
+  if (code && state) {
+    loginOAuth2Token(code, state).then(res => {
+      if (res.code === RESULT_CODE_SUCCESS) {
+        info.status = 'success';
+        info.title = t('views.login.authorizedSuccess');
+        info.subTitle = t('views.login.redirectHome', { i: 3 });
+        setAccessToken(res.data.accessToken, res.data.refreshExpiresIn);
+        setRefreshToken(res.data.refreshToken, res.data.refreshExpiresIn);
+        // 3秒后跳转主页
+        let i = 2;
+        const timer = setInterval(() => {
+          info.subTitle = t('views.login.redirectHome', { i });
+          i--;
+          if (i <= -1) {
+            clearInterval(timer);
+            /**登录后跳转主页 */
+            router.replace({ name: 'Index' }).finally(() => {
+              location.replace(location.origin);
+            });
+          }
+        }, 1000);
+      } else {
+        info.status = 'error';
+        info.title = t('views.login.authorizedFailed');
+        info.subTitle = res.msg;
+      }
+    });
+  } else {
+    // info.subTitle = "未获取到code和state参数";
+    info.subTitle = "code and state parameters not obtained";
+  }
+});
+</script>
+
+<template>
+  <a-result
+    :status="info.status"
+    :title="info.title"
+    v-model:subTitle="info.subTitle"
+  >
+    <template #extra>
+      <a-button
+        type="default"
+        v-if="info.status !== 'success'"
+        @click="fnToLogin"
+      >
+        {{ t('views.login.backBtnLogin') }}
+      </a-button>
+    </template>
+  </a-result>
+</template>
diff --git a/src/views/system/login-source/index.vue b/src/views/system/login-source/index.vue
new file mode 100644
index 00000000..b7400175
--- /dev/null
+++ b/src/views/system/login-source/index.vue
@@ -0,0 +1,1122 @@
+<script setup lang="ts">
+import { reactive, ref, onMounted, toRaw } from 'vue';
+import { PageContainer } from 'antdv-pro-layout';
+import { ProModal } from 'antdv-pro-modal';
+import { message, Modal, Form } from 'ant-design-vue/es';
+import { SizeType } from 'ant-design-vue/es/config-provider';
+import { MenuInfo } from 'ant-design-vue/es/menu/src/interface';
+import { ColumnsType } from 'ant-design-vue/es/table';
+import { parseUrlPath } from '@/plugins/file-static-url';
+import { parseDateToStr } from '@/utils/date-utils';
+import useDictStore from '@/store/modules/dict';
+import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
+import useI18n from '@/hooks/useI18n';
+import {
+  addLoginSource,
+  delLoginSource,
+  getLoginSource,
+  listLoginSource,
+  updateLoginSource,
+} from '@/api/system/login-source';
+import { UploadRequestOption } from 'ant-design-vue/es/vc-upload/interface';
+import { uploadFile } from '@/api/tool/file';
+const { t } = useI18n();
+const { getDict } = useDictStore();
+
+/**字典数据 */
+let dict: {
+  /**状态 */
+  sysNormalDisable: DictType[];
+  /**用户类型 */
+  sysUserType: DictType[];
+} = reactive({
+  /**状态 */
+  sysNormalDisable: [],
+  /**用户类型 */
+  sysUserType: [],
+});
+
+/**查询参数 */
+let queryParams = reactive({
+  /**类型 */
+  type: undefined,
+  /**当前页数 */
+  pageNum: 1,
+  /**每页条数 */
+  pageSize: 20,
+});
+
+/**查询参数重置 */
+function fnQueryReset() {
+  queryParams = Object.assign(queryParams, {
+    type: undefined,
+    pageNum: 1,
+    pageSize: 20,
+  });
+  tablePagination.current = 1;
+  tablePagination.pageSize = 20;
+  fnGetList();
+}
+
+/**表格状态类型 */
+type TabeStateType = {
+  /**加载等待 */
+  loading: boolean;
+  /**紧凑型 */
+  size: SizeType;
+  /**搜索栏 */
+  seached: boolean;
+  /**记录数据 */
+  data: object[];
+  /**勾选记录 */
+  selectedRowKeys: (string | number)[];
+};
+
+/**表格状态 */
+let tableState: TabeStateType = reactive({
+  loading: false,
+  size: 'middle',
+  seached: false,
+  data: [],
+  selectedRowKeys: [],
+});
+
+/**表格字段列 */
+let tableColumns = ref<ColumnsType>([
+  {
+    title: t('common.rowId'),
+    dataIndex: 'id',
+    align: 'left',
+    width: 100,
+  },
+  {
+    title: t('views.system.loginSource.uid'),
+    dataIndex: 'uid',
+    align: 'left',
+    width: 100,
+  },
+  {
+    title: t('views.system.loginSource.type'),
+    dataIndex: 'type',
+    key: 'type',
+    align: 'left',
+    width: 100,
+  },
+  {
+    title: t('views.system.loginSource.icon'),
+    dataIndex: 'icon',
+    key: 'icon',
+    align: 'left',
+    width: 100,
+  },
+  {
+    title: t('views.system.loginSource.name'),
+    dataIndex: 'name',
+    key: 'name',
+    align: 'left',
+    width: 200,
+    ellipsis: true,
+  },
+  {
+    title: t('views.system.loginSource.activeFlag'),
+    dataIndex: 'activeFlag',
+    key: 'activeFlag',
+    align: 'left',
+    width: 100,
+  },
+  {
+    title: t('views.system.loginSource.createTime'),
+    dataIndex: 'createTime',
+    align: 'left',
+    width: 200,
+    customRender(opt) {
+      if (+opt.value <= 0) return '';
+      return parseDateToStr(+opt.value);
+    },
+  },
+  {
+    title: t('views.system.loginSource.updateTime'),
+    dataIndex: 'updateTime',
+    align: 'left',
+    width: 200,
+    customRender(opt) {
+      if (+opt.value <= 0) return '';
+      return parseDateToStr(+opt.value);
+    },
+  },
+  {
+    title: t('common.operate'),
+    key: 'id',
+    align: 'left',
+  },
+]);
+
+/**表格分页器参数 */
+let tablePagination = reactive({
+  /**当前页数 */
+  current: 1,
+  /**每页条数 */
+  pageSize: 20,
+  /**默认的每页条数 */
+  defaultPageSize: 20,
+  /**指定每页可以显示多少条 */
+  pageSizeOptions: ['10', '20', '50', '100'],
+  /**只有一页时是否隐藏分页器 */
+  hideOnSinglePage: false,
+  /**是否可以快速跳转至某页 */
+  showQuickJumper: true,
+  /**是否可以改变 pageSize */
+  showSizeChanger: true,
+  /**数据总数 */
+  total: 0,
+  showTotal: (total: number) =>
+    t('common.tablePaginationTotal', { total: total }),
+  onChange: (page: number, pageSize: number) => {
+    tablePagination.current = page;
+    tablePagination.pageSize = pageSize;
+    queryParams.pageNum = page;
+    queryParams.pageSize = pageSize;
+    fnGetList();
+  },
+});
+
+/**表格紧凑型变更操作 */
+function fnTableSize({ key }: MenuInfo) {
+  tableState.size = key as SizeType;
+}
+
+/**表格多选 */
+function fnTableSelectedRowKeys(keys: (string | number)[]) {
+  tableState.selectedRowKeys = keys;
+}
+
+/**对话框对象信息状态类型 */
+type ModalStateType = {
+  /**新增框或修改框是否显示 */
+  openByEdit: boolean;
+  /**标题 */
+  title: string;
+  /**表单数据 */
+  from: Record<string, any>;
+  /**确定按钮 loading */
+  confirmLoading: boolean;
+  /**上传loading */
+  uploadLoading: boolean;
+};
+
+/**对话框对象信息状态 */
+let modalState: ModalStateType = reactive({
+  openByEdit: false,
+  title: '登录源',
+  from: {
+    id: undefined,
+    uid: '',
+    type: 'LDAP',
+    name: '',
+    icon: '',
+    activeFlag: '1',
+    syncFlag: '',
+    config: '',
+    createBy: '',
+    createTime: 0,
+    updateBy: '',
+    updateTime: 0,
+    remark: '',
+    configJson: {
+      // LDAP
+      url: '',
+      baseDN: '',
+      userFilter: '',
+      bindDN: '',
+      bindPassword: '',
+      // SMTP
+      host: '',
+      port: undefined,
+      // OAuth2
+      clientID: '',
+      clientSecret: '',
+      authURL: '',
+      tokenURL: '',
+      scopes: [],
+      redirectURL: '',
+      userURL: '',
+      accountField: '',
+    },
+  },
+  confirmLoading: false,
+  uploadLoading: false,
+});
+
+/**对话框内表单属性和校验规则 */
+const modalStateFrom = Form.useForm(
+  modalState.from,
+  reactive({
+    name: [
+      {
+        required: true,
+        min: 1,
+        max: 32,
+        message: t('views.system.loginSource.namePlease'),
+      },
+    ],
+    // LDAP
+    'configJson.url': [
+      {
+        required: true,
+        min: 1,
+        max: 250,
+        message: t('views.system.loginSource.ldapUrlPlease'),
+      },
+    ],
+    'configJson.baseDN': [
+      {
+        required: true,
+        min: 1,
+        max: 250,
+        message: t('views.system.loginSource.baseDnPlease'),
+      },
+    ],
+    'configJson.userFilter': [
+      {
+        required: true,
+        min: 1,
+        max: 250,
+        message: t('views.system.loginSource.userFilterPlease'),
+      },
+    ],
+    // SMTP
+    'configJson.host': [
+      {
+        required: true,
+        min: 1,
+        max: 250,
+        message: t('views.system.loginSource.smtpHostPlease'),
+      },
+    ],
+    'configJson.port': [
+      {
+        required: true,
+        min: 10,
+        max: 65535,
+        type: 'number',
+        message: t('views.system.loginSource.smtpPortPlease'),
+      },
+    ],
+    // OAuth2
+    'configJson.clientID': [
+      {
+        required: true,
+        message: t('views.system.loginSource.oauth2ClientIDPlease'),
+      },
+    ],
+    'configJson.clientSecret': [
+      {
+        required: true,
+        message: t('views.system.loginSource.oauth2ClientSecretPlease'),
+      },
+    ],
+    'configJson.authURL': [
+      {
+        required: true,
+        message: t('views.system.loginSource.oauth2AuthURLPlease'),
+      },
+    ],
+    'configJson.tokenURL': [
+      {
+        required: true,
+        message: t('views.system.loginSource.oauth2TokenURLPlease'),
+      },
+    ],
+    'configJson.scopes': [
+      {
+        required: true,
+        message: t('views.system.loginSource.oauth2ScopesPlease'),
+      },
+    ],
+    'configJson.redirectURL': [
+      {
+        required: true,
+        message: t('views.system.loginSource.oauth2RedirectURLPlease'),
+      },
+    ],
+    'configJson.userURL': [
+      {
+        required: true,
+        message: t('views.system.loginSource.oauth2UserURLPlease'),
+      },
+    ],
+    'configJson.accountField': [
+      {
+        required: true,
+        message: t('views.system.loginSource.oauth2AccountFieldPlease'),
+      },
+    ],
+  })
+);
+
+/**
+ * 对话框弹出显示为 新增或者修改
+ * @param id 编号id, 不传为新增
+ */
+function fnModalVisibleByEdit(id?: string | number) {
+  if (!id) {
+    modalStateFrom.resetFields();
+    modalState.title = t('views.system.loginSource.addInfo');
+    modalState.openByEdit = true;
+  } else {
+    if (modalState.confirmLoading) return;
+    const hide = message.loading(t('common.loading'), 0);
+    modalState.confirmLoading = true;
+    getLoginSource(id)
+      .then(res => {
+        if (res.code === RESULT_CODE_SUCCESS && res.data) {
+          modalState.from = Object.assign(modalState.from, res.data);
+          modalState.from.configJson = JSON.parse(res.data.config);
+          if (
+            res.data.type === 'OAuth2' &&
+            !modalState.from.configJson.scopes
+          ) {
+            modalState.from.configJson.scopes = [];
+          }
+
+          modalState.title = t('views.system.loginSource.editInfo');
+          modalState.openByEdit = true;
+        } else {
+          message.error(t('views.system.loginSource.viewInfoErr'), 2);
+        }
+      })
+      .finally(() => {
+        modalState.confirmLoading = false;
+        hide();
+      });
+  }
+}
+
+/**
+ * 类型改变
+ */
+function fnTypeChange(v: any) {
+  switch (v) {
+    case 'LDAP':
+      modalState.from.configJson = {
+        url: '',
+        baseDN: '',
+        userFilter: '',
+      };
+      break;
+    case 'SMTP':
+      modalState.from.configJson = {
+        host: '',
+        port: 0,
+      };
+      break;
+    case 'OAuth2':
+      modalState.from.configJson = {
+        clientID: '',
+        clientSecret: '',
+        authURL: '',
+        tokenURL: '',
+        scopes: [],
+        redirectURL: `${window.location.origin}/#/login/oauth2`,
+        userURL: '',
+        accountField: '',
+      };
+      break;
+  }
+}
+
+/**
+ * 对话框弹出确认执行函数
+ * 进行表达规则校验
+ */
+function fnModalOk() {
+  const from = toRaw(modalState.from);
+  from.config = JSON.stringify(from.configJson);
+  let validate = ['name'];
+  switch (from.type) {
+    case 'LDAP':
+      validate = [
+        'name',
+        'configJson.url',
+        'configJson.baseDN',
+        'configJson.userFilter',
+      ];
+      break;
+    case 'SMTP':
+      validate = ['name', 'configJson.host', 'configJson.port'];
+      break;
+    case 'OAuth2':
+      validate = [
+        'name',
+        'configJson.clientID',
+        'configJson.clientSecret',
+        'configJson.authURL',
+        'configJson.tokenURL',
+        'configJson.scopes',
+        'configJson.redirectURL',
+        'configJson.userURL',
+        'configJson.accountField',
+      ];
+      break;
+  }
+
+  modalStateFrom
+    .validate(validate)
+    .then(() => {
+      modalState.confirmLoading = true;
+      const req = from.id ? updateLoginSource(from) : addLoginSource(from);
+      const hide = message.loading(t('common.loading'), 0);
+      req
+        .then(res => {
+          if (res.code === RESULT_CODE_SUCCESS) {
+            message.success({
+              content: t('common.msgSuccess', { msg: modalState.title }),
+              duration: 2,
+            });
+            modalState.openByEdit = false;
+            modalStateFrom.resetFields();
+            fnGetList(1);
+          } else {
+            message.error({
+              content: `${res.msg}`,
+              duration: 2,
+            });
+          }
+        })
+        .finally(() => {
+          modalState.confirmLoading = false;
+          hide();
+        });
+    })
+    .catch(e => {
+      message.error(t('common.errorFields', { num: e.errorFields.length }), 3);
+    });
+}
+
+/**
+ * 对话框弹出关闭执行函数
+ * 进行表达规则校验
+ */
+function fnModalCancel() {
+  modalState.openByEdit = false;
+  modalStateFrom.resetFields();
+}
+
+/**
+ * 信息删除
+ * @param id 信息编号ID
+ */
+function fnRecordDelete(id: string = '0') {
+  if (id === '0') {
+    id = tableState.selectedRowKeys.join(',');
+  }
+  Modal.confirm({
+    title: t('common.tipTitle'),
+    content: t('views.system.loginSource.delTip', { num: id }),
+    onOk() {
+      const hide = message.loading(t('common.loading'), 0);
+      delLoginSource(id)
+        .then(res => {
+          if (res.code === RESULT_CODE_SUCCESS) {
+            message.success(t('views.system.loginSource.delOk'), 2);
+            fnGetList();
+          } else {
+            message.error(`${res.msg}`, 3);
+          }
+        })
+        .finally(() => {
+          hide();
+        });
+    },
+  });
+}
+
+/**上传变更 */
+function fnUpload(up: UploadRequestOption) {
+  Modal.confirm({
+    title: t('common.tipTitle'),
+    content: t('views.mmlManage.uploadFileTip'),
+    onOk() {
+      const hide = message.loading(t('common.loading'), 0);
+      modalState.uploadLoading = true;
+      const file = up.file as File;
+      const formData = new FormData();
+      formData.append('file', file, file.name);
+      formData.append('subPath', 'avatar');
+      uploadFile(formData)
+        .then(res => {
+          // 文件转存
+          if (res.code === RESULT_CODE_SUCCESS) {
+            message.success(t('views.system.loginSource.uploadFileOk'), 3);
+            modalState.from.icon = res.data.filePath;
+          } else {
+            message.error(t('views.system.loginSource.uploadFileErr'), 3);
+          }
+        })
+        .finally(() => {
+          modalState.uploadLoading = false;
+          hide();
+        });
+    },
+  });
+}
+
+/**查询参数配置列表, pageNum初始页数 */
+function fnGetList(pageNum?: number) {
+  if (tableState.loading) return;
+  tableState.loading = true;
+  if (pageNum) {
+    queryParams.pageNum = pageNum;
+  }
+
+  listLoginSource(toRaw(queryParams)).then(res => {
+    if (res.code === RESULT_CODE_SUCCESS) {
+      // 取消勾选
+      if (tableState.selectedRowKeys.length > 0) {
+        tableState.selectedRowKeys = [];
+      }
+      const { total, rows } = res.data;
+      tablePagination.total = total;
+      tableState.data = rows;
+      if (
+        tablePagination.total <=
+          (queryParams.pageNum - 1) * tablePagination.pageSize &&
+        queryParams.pageNum !== 1
+      ) {
+        tableState.loading = false;
+        fnGetList(queryParams.pageNum - 1);
+      }
+    }
+    tableState.loading = false;
+  });
+}
+
+onMounted(() => {
+  // 初始字典数据
+  Promise.allSettled([
+    getDict('sys_user_type'),
+    getDict('sys_normal_disable'),
+  ]).then(resArr => {
+    if (resArr[0].status === 'fulfilled') {
+      dict.sysUserType = resArr[0].value.filter(item => item.value != 'System');
+    }
+    if (resArr[1].status === 'fulfilled') {
+      dict.sysNormalDisable = resArr[1].value;
+    }
+  });
+  // 获取列表数据
+  fnGetList();
+});
+</script>
+
+<template>
+  <PageContainer>
+    <a-card
+      v-show="tableState.seached"
+      :bordered="false"
+      :body-style="{ marginBottom: '24px', paddingBottom: 0 }"
+    >
+      <!-- 表格搜索栏 -->
+      <a-form :model="queryParams" name="queryParams" layout="horizontal">
+        <a-row :gutter="16">
+          <a-col :lg="4" :md="12" :xs="24">
+            <a-form-item
+              :label="t('views.system.loginSource.type')"
+              name="type"
+            >
+              <a-select
+                v-model:value="queryParams.type"
+                allow-clear
+                :placeholder="t('common.selectPlease')"
+                :options="dict.sysUserType"
+              >
+              </a-select>
+            </a-form-item>
+          </a-col>
+          <a-col :lg="6" :md="12" :xs="24">
+            <a-form-item>
+              <a-space :size="8">
+                <a-button type="primary" @click.prevent="fnGetList(1)">
+                  <template #icon><SearchOutlined /></template>
+                  {{ t('common.search') }}
+                </a-button>
+                <a-button type="default" @click.prevent="fnQueryReset">
+                  <template #icon><ClearOutlined /></template>
+                  {{ t('common.reset') }}
+                </a-button>
+              </a-space>
+            </a-form-item>
+          </a-col>
+        </a-row>
+      </a-form>
+    </a-card>
+
+    <a-card :bordered="false" :body-style="{ padding: '0px' }">
+      <!-- 插槽-卡片左侧侧 -->
+      <template #title>
+        <a-space :size="8" align="center">
+          <a-button
+            type="primary"
+            @click.prevent="fnModalVisibleByEdit()"
+            v-perms:has="['system:loginSource:add']"
+          >
+            <template #icon><PlusOutlined /></template>
+            {{ t('common.addText') }}
+          </a-button>
+          <a-button
+            type="default"
+            danger
+            :disabled="tableState.selectedRowKeys.length <= 0"
+            @click.prevent="fnRecordDelete()"
+            v-perms:has="['system:loginSource:remove']"
+          >
+            <template #icon><DeleteOutlined /></template>
+            {{ t('common.deleteText') }}
+          </a-button>
+        </a-space>
+      </template>
+
+      <!-- 插槽-卡片右侧 -->
+      <template #extra>
+        <a-space :size="8" align="center">
+          <a-tooltip>
+            <template #title>{{ t('common.searchBarText') }}</template>
+            <a-switch
+              v-model:checked="tableState.seached"
+              :checked-children="t('common.switch.show')"
+              :un-checked-children="t('common.switch.hide')"
+              size="small"
+            />
+          </a-tooltip>
+          <a-tooltip>
+            <template #title>{{ t('common.reloadText') }}</template>
+            <a-button type="text" @click.prevent="fnGetList()">
+              <template #icon><ReloadOutlined /></template>
+            </a-button>
+          </a-tooltip>
+          <a-tooltip placement="topRight">
+            <template #title>{{ t('common.sizeText') }}</template>
+            <a-dropdown placement="bottomRight" trigger="click">
+              <a-button type="text">
+                <template #icon><ColumnHeightOutlined /></template>
+              </a-button>
+              <template #overlay>
+                <a-menu
+                  :selected-keys="[tableState.size as string]"
+                  @click="fnTableSize"
+                >
+                  <a-menu-item key="default">
+                    {{ t('common.size.default') }}
+                  </a-menu-item>
+                  <a-menu-item key="middle">
+                    {{ t('common.size.middle') }}
+                  </a-menu-item>
+                  <a-menu-item key="small">
+                    {{ t('common.size.small') }}
+                  </a-menu-item>
+                </a-menu>
+              </template>
+            </a-dropdown>
+          </a-tooltip>
+        </a-space>
+      </template>
+
+      <!-- 表格列表 -->
+      <a-table
+        class="table"
+        row-key="id"
+        :columns="tableColumns"
+        :loading="tableState.loading"
+        :data-source="tableState.data"
+        :size="tableState.size"
+        :pagination="tablePagination"
+        :scroll="{ x: tableColumns.length * 150 }"
+        :row-selection="{
+          type: 'checkbox',
+          selectedRowKeys: tableState.selectedRowKeys,
+          onChange: fnTableSelectedRowKeys,
+        }"
+      >
+        <template #bodyCell="{ column, record }">
+          <template v-if="column.key === 'type'">
+            <DictTag :options="dict.sysUserType" :value="record.type" />
+          </template>
+          <template v-if="column.key === 'icon'">
+            <a-avatar
+              v-if="record.icon"
+              :src="parseUrlPath(record.icon)"
+              :alt="record.name"
+            />
+            <a-avatar v-else :alt="record.name">{{ record.name }}</a-avatar>
+          </template>
+          <template v-if="column.key === 'activeFlag'">
+            <DictTag
+              :options="dict.sysNormalDisable"
+              :value="record.activeFlag"
+            />
+          </template>
+          <template v-if="column.key === 'id'">
+            <a-space :size="8" align="start">
+              <a-tooltip>
+                <template #title>{{ t('common.editText') }}</template>
+                <a-button
+                  type="link"
+                  @click.prevent="fnModalVisibleByEdit(record.id)"
+                  v-perms:has="['system:loginSource:edit']"
+                >
+                  <template #icon><FormOutlined /></template>
+                </a-button>
+              </a-tooltip>
+              <a-tooltip>
+                <template #title>{{ t('common.deleteText') }}</template>
+                <a-button
+                  type="link"
+                  @click.prevent="fnRecordDelete(record.id)"
+                  v-perms:has="['system:loginSource:remove']"
+                >
+                  <template #icon><DeleteOutlined /></template>
+                </a-button>
+              </a-tooltip>
+            </a-space>
+          </template>
+        </template>
+      </a-table>
+    </a-card>
+
+    <!-- 新增框或修改框 -->
+    <ProModal
+      :drag="true"
+      :width="800"
+      :destroyOnClose="true"
+      :keyboard="false"
+      :mask-closable="false"
+      :open="modalState.openByEdit"
+      :title="modalState.title"
+      :confirm-loading="modalState.confirmLoading"
+      @ok="fnModalOk"
+      @cancel="fnModalCancel"
+    >
+      <a-form
+        name="modalStateFrom"
+        layout="horizontal"
+        :label-col="{ span: 8 }"
+        :label-wrap="true"
+      >
+        <a-row>
+          <a-col :lg="12" :md="12" :xs="24">
+            <a-form-item
+              :label="t('views.system.loginSource.icon')"
+              name="icon"
+            >
+              <a-input-group compact>
+                <a-input
+                  v-model:value="modalState.from.icon"
+                  :placeholder="t('views.system.loginSource.iconPlease')"
+                  style="width: calc(100% - 32px)"
+                  id="icon"
+                />
+                <a-upload
+                  name="file"
+                  list-type="text"
+                  accept=".jpg,.png,.jpeg"
+                  :max-count="1"
+                  :show-upload-list="false"
+                  :custom-request="(v:any) => fnUpload(v)"
+                >
+                  <a-button type="primary" :loading="modalState.uploadLoading">
+                    <template #icon>
+                      <UploadOutlined />
+                    </template>
+                  </a-button>
+                </a-upload>
+              </a-input-group>
+            </a-form-item>
+          </a-col>
+          <a-col :lg="12" :md="12" :xs="24">
+            <a-form-item
+              :label="t('views.system.loginSource.activeFlag')"
+              name="activeFlag"
+            >
+              <a-select
+                v-model:value="modalState.from.activeFlag"
+                default-value="0"
+                :options="dict.sysNormalDisable"
+                :placeholder="t('common.selectPlease')"
+              >
+              </a-select>
+            </a-form-item>
+          </a-col>
+        </a-row>
+
+        <a-row>
+          <a-col :lg="12" :md="12" :xs="24">
+            <a-form-item
+              :label="t('views.system.loginSource.name')"
+              name="name"
+              v-bind="modalStateFrom.validateInfos.name"
+            >
+              <a-input
+                v-model:value="modalState.from.name"
+                allow-clear
+                :placeholder="t('views.system.loginSource.namePlease')"
+              ></a-input>
+            </a-form-item>
+          </a-col>
+          <a-col :lg="12" :md="12" :xs="24">
+            <a-form-item
+              :label="t('views.system.loginSource.type')"
+              name="type"
+            >
+              <a-select
+                v-model:value="modalState.from.type"
+                default-value="0"
+                :options="dict.sysUserType"
+                :placeholder="t('common.selectPlease')"
+                @change="fnTypeChange"
+              >
+              </a-select>
+            </a-form-item>
+          </a-col>
+        </a-row>
+
+        <!-- LDAP 配置 -->
+        <template v-if="modalState.from.type === 'LDAP'">
+          <a-form-item
+            :label="t('views.system.loginSource.ldapUrl')"
+            name="url"
+            v-bind="modalStateFrom.validateInfos['configJson.url']"
+            :label-col="{ span: 4 }"
+            :label-wrap="true"
+          >
+            <a-input
+              v-model:value="modalState.from.configJson.url"
+              allow-clear
+              placeholder="ldap://openldap.company.com:389"
+            ></a-input>
+          </a-form-item>
+          <a-form-item
+            :label="t('views.system.loginSource.ldapBaseDN')"
+            name="baseDN"
+            v-bind="modalStateFrom.validateInfos['configJson.baseDN']"
+            :label-col="{ span: 4 }"
+            :label-wrap="true"
+          >
+            <a-input
+              v-model:value="modalState.from.configJson.baseDN"
+              allow-clear
+              placeholder="ou=People,dc=company,dc=com"
+            ></a-input>
+          </a-form-item>
+          <a-form-item
+            :label="t('views.system.loginSource.ldapUserFilter')"
+            name="userFilter"
+            v-bind="modalStateFrom.validateInfos['configJson.userFilter']"
+            :label-col="{ span: 4 }"
+            :label-wrap="true"
+          >
+            <a-input
+              v-model:value="modalState.from.configJson.userFilter"
+              allow-clear
+              placeholder="(&(objectClass=organizationalPerson)(uid=%s))"
+            ></a-input>
+          </a-form-item>
+          <a-form-item
+            :label="t('views.system.loginSource.ldapBindDN')"
+            name="bindDN"
+            :label-col="{ span: 4 }"
+            :label-wrap="true"
+          >
+            <a-input
+              v-model:value="modalState.from.configJson.bindDN"
+              allow-clear
+              placeholder="cn=admin,dc=company,dc=com"
+            ></a-input>
+          </a-form-item>
+          <a-form-item
+            :label="t('views.system.loginSource.ldapBindPassword')"
+            name="bindPassword"
+            :label-col="{ span: 4 }"
+            :label-wrap="true"
+          >
+            <a-input-password
+              v-model:value="modalState.from.configJson.bindPassword"
+              allow-clear
+              placeholder="adminpassword"
+            ></a-input-password>
+          </a-form-item>
+        </template>
+
+        <!-- SMTP 配置 -->
+        <template v-if="modalState.from.type === 'SMTP'">
+          <a-form-item
+            :label="t('views.system.loginSource.smtpHost')"
+            name="host"
+            v-bind="modalStateFrom.validateInfos['configJson.host']"
+            :label-col="{ span: 4 }"
+            :label-wrap="true"
+          >
+            <a-input
+              v-model:value="modalState.from.configJson.host"
+              allow-clear
+              placeholder="smtp.gmail.com"
+            ></a-input>
+          </a-form-item>
+          <a-form-item
+            :label="t('views.system.loginSource.smtpPort')"
+            name="port"
+            v-bind="modalStateFrom.validateInfos['configJson.port']"
+            :label-col="{ span: 4 }"
+            :label-wrap="true"
+          >
+            <a-input-number
+              v-model:value="modalState.from.configJson.port"
+              allow-clear
+              placeholder="587"
+              :min="10"
+              :max="65535"
+            ></a-input-number>
+          </a-form-item>
+        </template>
+
+        <!-- OAuth2 配置 -->
+        <template v-if="modalState.from.type === 'OAuth2'">
+          <a-form-item
+            :label="t('views.system.loginSource.oauth2ClientID')"
+            name="clientID"
+            v-bind="modalStateFrom.validateInfos['configJson.clientID']"
+            :label-col="{ span: 4 }"
+            :label-wrap="true"
+          >
+            <a-input
+              v-model:value="modalState.from.configJson.clientID"
+              allow-clear
+              placeholder="Client ID"
+            ></a-input>
+          </a-form-item>
+          <a-form-item
+            :label="t('views.system.loginSource.oauth2ClientSecret')"
+            name="clientSecret"
+            v-bind="modalStateFrom.validateInfos['configJson.clientSecret']"
+            :label-col="{ span: 4 }"
+            :label-wrap="true"
+          >
+            <a-input
+              v-model:value="modalState.from.configJson.clientSecret"
+              allow-clear
+              placeholder="Client Secret"
+            ></a-input>
+          </a-form-item>
+          <a-form-item
+            :label="t('views.system.loginSource.oauth2AuthURL')"
+            name="authURL"
+            v-bind="modalStateFrom.validateInfos['configJson.authURL']"
+            :label-col="{ span: 4 }"
+            :label-wrap="true"
+          >
+            <a-input
+              v-model:value="modalState.from.configJson.authURL"
+              allow-clear
+              placeholder="{host}/login/oauth/authorize"
+            ></a-input>
+          </a-form-item>
+          <a-form-item
+            :label="t('views.system.loginSource.oauth2TokenURL')"
+            name="tokenURL"
+            v-bind="modalStateFrom.validateInfos['configJson.tokenURL']"
+            :label-col="{ span: 4 }"
+            :label-wrap="true"
+          >
+            <a-input
+              v-model:value="modalState.from.configJson.tokenURL"
+              allow-clear
+              placeholder="{host}/login/oauth/access_token"
+            ></a-input>
+          </a-form-item>
+          <a-form-item
+            :label="t('views.system.loginSource.oauth2Scopes')"
+            name="scope"
+            v-bind="modalStateFrom.validateInfos['configJson.scopes']"
+            :label-col="{ span: 4 }"
+            :label-wrap="true"
+          >
+            <a-select
+              v-model:value="modalState.from.configJson.scopes"
+              mode="tags"
+              style="width: 100%"
+              placeholder="Scopes"
+            ></a-select>
+          </a-form-item>
+          <a-form-item
+            :label="t('views.system.loginSource.oauth2RedirectURL')"
+            name="redirectURL"
+            v-bind="modalStateFrom.validateInfos['configJson.redirectURL']"
+            :label-col="{ span: 4 }"
+            :label-wrap="true"
+          >
+            <a-input
+              v-model:value="modalState.from.configJson.redirectURL"
+              allow-clear
+              placeholder="{omchost}/#/login/oauth2"
+            >
+              <template #prefix>
+                <a-tooltip placement="topLeft">
+                  <template #title>
+                    {{ t('views.system.loginSource.oauth2RedirectURLTip') }}
+                  </template>
+                  <InfoCircleOutlined style="opacity: 0.45; color: inherit" />
+                </a-tooltip>
+              </template>
+            </a-input>
+          </a-form-item>
+          <a-form-item
+            :label="t('views.system.loginSource.oauth2UserURL')"
+            name="userURL"
+            v-bind="modalStateFrom.validateInfos['configJson.userURL']"
+            :label-col="{ span: 4 }"
+            :label-wrap="true"
+          >
+            <a-input
+              v-model:value="modalState.from.configJson.userURL"
+              allow-clear
+              placeholder="{host}/api/v1/user"
+            ></a-input>
+          </a-form-item>
+          <a-form-item
+            :label="t('views.system.loginSource.oauth2AccountField')"
+            name="accountField"
+            v-bind="modalStateFrom.validateInfos['configJson.accountField']"
+            :label-col="{ span: 4 }"
+            :label-wrap="true"
+          >
+            <a-input
+              v-model:value="modalState.from.configJson.accountField"
+              allow-clear
+              placeholder="data.username"
+            ></a-input>
+          </a-form-item>
+        </template>
+
+        <a-form-item
+          :label="t('views.system.loginSource.remark')"
+          name="remark"
+          :label-col="{ span: 4 }"
+          :label-wrap="true"
+        >
+          <a-textarea
+            v-model:value="modalState.from.remark"
+            :auto-size="{ minRows: 1, maxRows: 6 }"
+            :maxlength="450"
+            :show-count="true"
+            :placeholder="t('common.inputPlease')"
+          />
+        </a-form-item>
+      </a-form>
+    </ProModal>
+  </PageContainer>
+</template>
+
+<style lang="less" scoped>
+.table :deep(.ant-pagination) {
+  padding: 0 24px;
+}
+</style>
diff --git a/src/views/system/user/index.vue b/src/views/system/user/index.vue
index 479dcf8f..5c9a349c 100644
--- a/src/views/system/user/index.vue
+++ b/src/views/system/user/index.vue
@@ -44,10 +44,13 @@ const { t } = useI18n();
 let dict: {
   /**状态 */
   sysNormalDisable: DictType[];
+  /**用户类型 */
+  sysUserType: DictType[];
   /**性别 */
   sysUserSex: DictType[];
 } = reactive({
   sysNormalDisable: [],
+  sysUserType: [],
   sysUserSex: [],
 });
 
@@ -64,6 +67,8 @@ let queryParams = reactive({
   deptId: undefined,
   /**用户状态 */
   statusFlag: undefined,
+  /**用户类型 */
+  userType: undefined,
   /**记录开始时间 */
   beginTime: undefined as number | undefined,
   /**记录结束时间 */
@@ -81,6 +86,7 @@ function fnQueryReset() {
     phone: '',
     deptId: undefined,
     statusFlag: undefined,
+    userType: undefined,
     beginTime: undefined,
     endTime: undefined,
     pageNum: 1,
@@ -148,6 +154,13 @@ let tableColumns: ColumnsType = [
     align: 'left',
     width: 200,
   },
+  {
+    title: t('views.system.user.userType'),
+    dataIndex: 'userType',
+    key: 'userType',
+    align: 'left',
+    width: 200,
+  },
   {
     title: t('views.system.user.loginIp'),
     dataIndex: 'loginIp',
@@ -792,13 +805,17 @@ onMounted(() => {
   // 初始字典数据
   Promise.allSettled([
     getDict('sys_normal_disable'),
+    getDict('sys_user_type'),
     getDict('sys_user_sex'),
   ]).then(resArr => {
     if (resArr[0].status === 'fulfilled') {
       dict.sysNormalDisable = resArr[0].value;
     }
     if (resArr[1].status === 'fulfilled') {
-      dict.sysUserSex = resArr[1].value;
+      dict.sysUserType = resArr[1].value;
+    }
+    if (resArr[2].status === 'fulfilled') {
+      dict.sysUserSex = resArr[2].value;
     }
   });
   // 获取列表数据
@@ -881,7 +898,7 @@ onMounted(() => {
               ></a-input>
             </a-form-item>
           </a-col>
-          <a-col :lg="4" :md="12" :xs="24">
+          <a-col :lg="6" :md="12" :xs="24">
             <a-form-item
               :label="t('views.system.user.status')"
               name="statusFlag"
@@ -895,6 +912,20 @@ onMounted(() => {
               </a-select>
             </a-form-item>
           </a-col>
+          <a-col :lg="6" :md="12" :xs="24">
+            <a-form-item
+              :label="t('views.system.user.userType')"
+              name="userType"
+            >
+              <a-select
+                v-model:value="queryParams.userType"
+                allow-clear
+                :options="dict.sysUserType"
+                :placeholder="t('common.selectPlease')"
+              >
+              </a-select>
+            </a-form-item>
+          </a-col>
           <a-col :lg="8" :md="12" :xs="24">
             <a-form-item
               :label="t('views.system.user.loginTime')"
@@ -1022,6 +1053,15 @@ onMounted(() => {
               {{ r.roleName }}
             </a-tag>
           </template>
+          <template v-if="column.key === 'userType'">
+            <DictTag :options="dict.sysUserType" :value="record.userType" />
+            <a-tag
+              :bordered="false" 
+              v-if="record.userSource != '#'"
+            >
+              {{ record.userSource }}
+            </a-tag>
+          </template>
           <template v-if="column.key === 'deptId'">
             {{ record.dept?.deptName }}
           </template>