From 459b357b400e8e675e74527deebb3823913e9223 Mon Sep 17 00:00:00 2001
From: Wenjie Zhang <xerrors@163.com>
Date: Wed, 28 May 2025 15:16:07 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=B7=BB=E5=8A=A0=E5=81=A5=E5=BA=B7?=
 =?UTF-8?q?=E6=A3=80=E6=9F=A5=E6=8E=A5=E5=8F=A3=E5=92=8C=E5=89=8D=E7=AB=AF?=
 =?UTF-8?q?=E6=94=AF=E6=8C=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 在后端添加了健康检查接口，返回服务状态。
- 在前端新增健康检查API，支持检查服务端健康状态。 #199
- 登录页面增加服务状态提示，改善用户体验。
---
 server/routers/base_router.py  |   5 ++
 web/src/apis/base.js           |  18 ++++++
 web/src/views/DataBaseView.vue |  27 +++------
 web/src/views/LoginView.vue    | 102 ++++++++++++++++++++++++++++++++-
 4 files changed, 130 insertions(+), 22 deletions(-)

diff --git a/server/routers/base_router.py b/server/routers/base_router.py
index 2cf61851..48c0290a 100644
--- a/server/routers/base_router.py
+++ b/server/routers/base_router.py
@@ -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()
diff --git a/web/src/apis/base.js b/web/src/apis/base.js
index aad20564..54ef4b56 100644
--- a/web/src/apis/base.js
+++ b/web/src/apis/base.js
@@ -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 }
+    }
+  }
 }
\ No newline at end of file
diff --git a/web/src/views/DataBaseView.vue b/web/src/views/DataBaseView.vue
index 3cf17920..8f1d91c3 100644
--- a/web/src/views/DataBaseView.vue
+++ b/web/src/views/DataBaseView.vue
@@ -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>图数据库 &nbsp; <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';
diff --git a/web/src/views/LoginView.vue b/web/src/views/LoginView.vue
index 7755d270..7d101f4f 100644
--- a/web/src/views/LoginView.vue
+++ b/web/src/views/LoginView.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>
\ No newline at end of file