feat: 添加健康检查接口和前端支持
- 在后端添加了健康检查接口，返回服务状态。 - 在前端新增健康检查API，支持检查服务端健康状态。 #199 - 登录页面增加服务状态提示，改善用户体验。
This commit is contained in:
Wenjie Zhang
parent
589894720c
commit
459b357b40
@ -12,6 +12,11 @@ base = APIRouter()
|
||||
async def route_index():
|
||||
return {"message": "You Got It!"}
|
||||
|
||||
@base.get("/health")
|
||||
async def health_check():
|
||||
"""简单的健康检查接口"""
|
||||
return {"status": "ok", "message": "服务正常运行"}
|
||||
|
||||
@base.get("/config")
|
||||
def get_config(current_user: User = Depends(get_admin_user)):
|
||||
return config.dump_config()
|
||||
|
||||
@ -153,4 +153,22 @@ export function apiPut(url, data = {}, options = {}, requiresAuth = false) {
|
||||
*/
|
||||
export function apiDelete(url, options = {}, requiresAuth = false) {
|
||||
return apiRequest(url, { method: 'DELETE', ...options }, requiresAuth)
|
||||
}
|
||||
|
||||
/**
|
||||
* 健康检查API
|
||||
*/
|
||||
export const healthApi = {
|
||||
/**
|
||||
* 检查服务端健康状态
|
||||
* @returns {Promise} - 健康检查结果
|
||||
*/
|
||||
async checkHealth() {
|
||||
try {
|
||||
const response = await apiGet('/api/health')
|
||||
return { status: 'ok', data: response }
|
||||
} catch (error) {
|
||||
return { status: 'error', error: error.message }
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -2,7 +2,12 @@
|
||||
<div class="database-container layout-container" v-if="configStore.config.enable_knowledge_base">
|
||||
<HeaderComponent title="文档知识库" :loading="state.loading">
|
||||
<template #actions>
|
||||
<a-button type="primary" @click="newDatabase.open=true">新建知识库</a-button>
|
||||
<a-button type="primary" @click="newDatabase.open=true">
|
||||
<template #icon>
|
||||
<BookPlus size="16" />
|
||||
</template>
|
||||
新建知识库
|
||||
</a-button>
|
||||
</template>
|
||||
</HeaderComponent>
|
||||
|
||||
@ -27,7 +32,7 @@
|
||||
<div class="databases">
|
||||
<div class="new-database dbcard" @click="newDatabase.open=true">
|
||||
<div class="top">
|
||||
<div class="icon"><PlusOutlined /></div>
|
||||
<div class="icon"><BookPlus /></div>
|
||||
<div class="info">
|
||||
<h3>新建知识库</h3>
|
||||
</div>
|
||||
@ -56,23 +61,6 @@
|
||||
<!-- <button @click="deleteDatabase(database.collection_name)">删除</button> -->
|
||||
</div>
|
||||
</div>
|
||||
<!-- <h2>图数据库 <a-spin v-if="graphloading" :indicator="indicator" /></h2>
|
||||
<p>基于 neo4j 构建的图数据库。</p>
|
||||
<div :class="{'graphloading': graphloading, 'databases': true}" v-if="graph">
|
||||
<div class="dbcard graphbase" @click="navigateToGraph">
|
||||
<div class="top">
|
||||
<div class="icon"><AppstoreFilled /></div>
|
||||
<div class="info">
|
||||
<h3>{{ graph?.database_name }}</h3>
|
||||
<p>
|
||||
<span>{{ graph?.status }}</span> ·
|
||||
<span>{{ graph?.entity_count }}实体</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<p class="description">基于 neo4j 构建的图数据库。基于 neo4j 构建的图数据库。基于 neo4j 构建的图数据库。</p>
|
||||
</div>
|
||||
</div> -->
|
||||
</div>
|
||||
<div class="database-empty" v-else>
|
||||
<a-empty>
|
||||
@ -90,6 +78,7 @@ import { ref, onMounted, reactive, watch, h } from 'vue'
|
||||
import { useRouter, useRoute } from 'vue-router';
|
||||
import { message, Button } from 'ant-design-vue'
|
||||
import { ReadFilled, PlusOutlined, AppstoreFilled, LoadingOutlined } from '@ant-design/icons-vue'
|
||||
import { BookPlus } from 'lucide-vue-next';
|
||||
import { useConfigStore } from '@/stores/config';
|
||||
import { useUserStore } from '@/stores/user';
|
||||
import HeaderComponent from '@/components/HeaderComponent.vue';
|
||||
|
||||
@ -1,6 +1,20 @@
|
||||
<template>
|
||||
<!-- TODO 登录页面样式优化；（1）风格和整个系统统一； -->
|
||||
<div class="login-view" :style="{ backgroundImage: `url(${loginBg})` }">
|
||||
<div class="login-view" :style="{ backgroundImage: `url(${loginBg})` }" :class="{ 'has-alert': serverStatus === 'error' }">
|
||||
<!-- 服务状态提示 -->
|
||||
<div v-if="serverStatus === 'error'" class="server-status-alert">
|
||||
<div class="alert-content">
|
||||
<exclamation-circle-outlined class="alert-icon" />
|
||||
<div class="alert-text">
|
||||
<div class="alert-title">服务端连接失败</div>
|
||||
<div class="alert-message">{{ serverError }}</div>
|
||||
</div>
|
||||
<a-button type="link" size="small" @click="checkServerHealth" :loading="healthChecking">
|
||||
重试
|
||||
</a-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="login-container">
|
||||
<div class="login-logo">
|
||||
<!-- <img src="@/assets/logo.svg" alt="Logo" v-if="false" /> -->
|
||||
@ -141,8 +155,8 @@ import { useRouter } from 'vue-router';
|
||||
import { useUserStore } from '@/stores/user';
|
||||
import { message } from 'ant-design-vue';
|
||||
import { chatApi } from '@/apis/auth_api';
|
||||
import { authApi } from '@/apis/public_api';
|
||||
import { UserOutlined, LockOutlined, WechatOutlined, QrcodeOutlined, ThunderboltOutlined } from '@ant-design/icons-vue';
|
||||
import { authApi, healthApi } from '@/apis/public_api';
|
||||
import { UserOutlined, LockOutlined, WechatOutlined, QrcodeOutlined, ThunderboltOutlined, ExclamationCircleOutlined } from '@ant-design/icons-vue';
|
||||
import loginBg from '@/assets/pics/login_bg.jpg';
|
||||
|
||||
const router = useRouter();
|
||||
@ -153,6 +167,9 @@ const isFirstRun = ref(false);
|
||||
const loading = ref(false);
|
||||
const errorMessage = ref('');
|
||||
const rememberMe = ref(false);
|
||||
const serverStatus = ref('loading');
|
||||
const serverError = ref('');
|
||||
const healthChecking = ref(false);
|
||||
|
||||
// 登录表单
|
||||
const loginForm = reactive({
|
||||
@ -283,6 +300,27 @@ const checkFirstRunStatus = async () => {
|
||||
}
|
||||
};
|
||||
|
||||
// 检查服务器健康状态
|
||||
const checkServerHealth = async () => {
|
||||
try {
|
||||
healthChecking.value = true;
|
||||
const response = await healthApi.check();
|
||||
if (response.status === 'ok') {
|
||||
message.success('服务端连接成功');
|
||||
serverStatus.value = 'ok';
|
||||
} else {
|
||||
serverStatus.value = 'error';
|
||||
serverError.value = response.message || '服务端状态异常';
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('检查服务器健康状态失败:', error);
|
||||
serverStatus.value = 'error';
|
||||
serverError.value = error.message || '无法连接到服务端，请检查网络连接';
|
||||
} finally {
|
||||
healthChecking.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
// 组件挂载时
|
||||
onMounted(async () => {
|
||||
// 如果已登录，跳转到首页
|
||||
@ -291,6 +329,9 @@ onMounted(async () => {
|
||||
return;
|
||||
}
|
||||
|
||||
// 首先检查服务器健康状态
|
||||
await checkServerHealth();
|
||||
|
||||
// 检查是否是首次运行
|
||||
await checkFirstRunStatus();
|
||||
});
|
||||
@ -306,6 +347,11 @@ onMounted(async () => {
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
position: relative;
|
||||
padding-top: 0;
|
||||
|
||||
&.has-alert {
|
||||
padding-top: 60px;
|
||||
}
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
@ -475,4 +521,54 @@ onMounted(async () => {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.server-status-alert {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
padding: 12px 20px;
|
||||
background: linear-gradient(135deg, #ff4d4f, #ff7875);
|
||||
color: white;
|
||||
z-index: 1000;
|
||||
box-shadow: 0 2px 8px rgba(255, 77, 79, 0.3);
|
||||
|
||||
.alert-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
|
||||
.alert-icon {
|
||||
font-size: 20px;
|
||||
margin-right: 12px;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.alert-text {
|
||||
flex: 1;
|
||||
|
||||
.alert-title {
|
||||
font-weight: 600;
|
||||
font-size: 16px;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
|
||||
.alert-message {
|
||||
font-size: 14px;
|
||||
opacity: 0.9;
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.ant-btn-link) {
|
||||
color: white;
|
||||
border-color: white;
|
||||
|
||||
&:hover {
|
||||
color: white;
|
||||
background-color: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue
Block a user