feat: 第三方登录认证功能和管理页

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,
+  });
+}

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',
+  });
+}

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:',
+      otherMethod: 'Other Methods',
-      loginMethodWX: 'WeChat Scan Login',
+      backBtn: 'Back',
-      loginMethodQQ: 'QQ Scan Code Login',
+      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',

src/i18n/locales/zh-CN.ts

@@ -264,9 +264,13 @@ export default {
       registerBtn: '注册账号',
       loginBtn: '登录',
       loginSuccess: '登录成功',
-      loginMethod: '其他登录方式：',
+      otherMethod: '其他方式',
-      loginMethodWX: '微信扫一扫登录',
+      backBtn: '返回',
-      loginMethodQQ: 'QQ扫码登录',
+      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: '提交保存',

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"

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

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

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) {

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>

src/views/login.vue

@@ -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>

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>

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>

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>

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;
+  });
+}

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>

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>

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>