feat: 优化目标系统登录中心页面环境显示

- 将 Auth v2.0 标签改为显示当前激活的目标环境信息
- 调用 /setting/environment/current 接口获取当前环境
- 在页面加载时自动获取当前环境信息
- 登录成功后自动刷新环境信息
- 添加加载状态和未配置环境的提示
- 优化登录信息查询逻辑,处理 code 500 情况
- 优化样式,添加环境图标和加载动画
This commit is contained in:
Kris 2026-01-24 18:42:29 +08:00
parent f7e6ac0e2a
commit 95b944518a

View File

@ -6,7 +6,15 @@
<template #header>
<div class="card-header">
<span class="header-title">目标系统登录中心</span>
<el-tag type="info" size="small" effect="plain">Auth v2.0</el-tag>
<div class="environment-info">
<el-tag v-if="currentEnvironment" type="success" size="small" effect="dark">
<el-icon class="tag-icon"><Monitor /></el-icon>
{{ currentEnvironment.environmentName }}
</el-tag>
<el-tag v-else type="info" size="small" effect="plain" :loading="environmentLoading">
{{ environmentLoading ? '加载中...' : '未配置环境' }}
</el-tag>
</div>
</div>
</template>
@ -377,6 +385,7 @@
<script setup name="TargetSystemLogin">
import { ref, computed, getCurrentInstance, onMounted } from 'vue';
import { doLogin, logout, getCurrentLoginInfo, autoLogin, queryLoginHistory, autoLoginByHistory } from "@/api/auth/register";
import { getCurrentEnvironment } from "@/api/setting/environment";
import { ElMessage, ElMessageBox } from 'element-plus';
import {
RefreshRight, User, SwitchButton, DocumentCopy, Switch,
@ -396,6 +405,8 @@
const historyLoading = ref(false);
const selectedHistoryId = ref(null);
const autoLoginByHistoryLoading = ref(null);
const currentEnvironment = ref(null);
const environmentLoading = ref(false);
const loginForm = ref({
loginType: 'oauth2',
@ -527,6 +538,7 @@ const handleLoginUrlPreset = (command) => {
// --- ---
// 2
onMounted(() => {
handleGetCurrentEnvironment();
handleGetCurrentInfo();
});
@ -584,6 +596,7 @@ const handleLoginTypeChange = () => {
if (response.code === 200) {
loginResult.value = response.data;
ElMessage.success('登录成功');
await handleGetCurrentEnvironment();
} else {
loginResult.value = { success: false, errorCode: response.code, errorMessage: response.msg };
ElMessage.error(response.msg || '登录失败');
@ -610,6 +623,7 @@ const handleLoginTypeChange = () => {
if (response.code === 200) {
loginResult.value = response.data;
ElMessage.success('自动登录成功');
await handleGetCurrentEnvironment();
} else {
ElMessage.error(response.msg || '自动登录失败');
}
@ -636,11 +650,20 @@ const handleLoginTypeChange = () => {
} else {
loginResult.value = response.data;
}
} else if (response.code === 500) {
loginResult.value = null;
const historyResponse = await queryLoginHistory('target');
if (historyResponse.code === 200 && historyResponse.data && historyResponse.data.length > 0) {
ElMessage.warning('当前会话已过期,请重新登录');
} else {
ElMessage.info('当前未登录,请先登录');
}
} else {
loginResult.value = null;
}
} catch (error) {
console.warn('Auto fetch info failed:', error);
loginResult.value = null;
} finally {
currentLoading.value = false;
}
@ -781,6 +804,23 @@ const handleLoginTypeChange = () => {
autoLoginByHistoryLoading.value = null;
}
};
const handleGetCurrentEnvironment = async () => {
environmentLoading.value = true;
try {
const response = await getCurrentEnvironment('target');
if (response.code === 200 && response.data) {
currentEnvironment.value = response.data;
} else {
currentEnvironment.value = null;
}
} catch (error) {
console.warn('Get current environment failed:', error);
currentEnvironment.value = null;
} finally {
environmentLoading.value = false;
}
};
</script>
<style scoped>
@ -846,6 +886,16 @@ const handleLoginTypeChange = () => {
color: #303133;
}
.environment-info {
display: flex;
align-items: center;
gap: 8px;
}
.tag-icon {
margin-right: 4px;
}
/* 左侧表单样式 */
.full-width-radio {
display: flex;