From 5e865c0234b00888b8383a89eb0448bac2de0a59 Mon Sep 17 00:00:00 2001
From: 666ghj <670939375@qq.com>
Date: Fri, 9 Jan 2026 11:12:10 +0800
Subject: [PATCH] refactor(HistoryDatabase): improve project display logic and
 loading states

- Added conditional rendering for the tech grid background and cards container based on project availability.
- Simplified the empty state display logic when no projects are present.
- Introduced a new CSS class to adjust layout when there are no projects, enhancing visual consistency.
---
 frontend/src/components/HistoryDatabase.vue | 21 +++++++++++----------
 1 file changed, 11 insertions(+), 10 deletions(-)

diff --git a/frontend/src/components/HistoryDatabase.vue b/frontend/src/components/HistoryDatabase.vue
index cb79826..1443abf 100644
--- a/frontend/src/components/HistoryDatabase.vue
+++ b/frontend/src/components/HistoryDatabase.vue
@@ -1,10 +1,11 @@
 <template>
   <div 
     class="history-database"
+    :class="{ 'no-projects': projects.length === 0 && !loading }"
     ref="historyContainer"
   >
-    <!-- 背景装饰：技术网格线（使用CSS背景，固定间距正方形网格） -->
-    <div class="tech-grid-bg">
+    <!-- 背景装饰：技术网格线（只在有项目时显示） -->
+    <div v-if="projects.length > 0 || loading" class="tech-grid-bg">
       <div class="grid-pattern"></div>
       <div class="gradient-overlay"></div>
     </div>
@@ -16,8 +17,8 @@
       <div class="section-line"></div>
     </div>
 
-    <!-- 卡片容器 -->
-    <div class="cards-container" :class="{ expanded: isExpanded }" :style="containerStyle">
+    <!-- 卡片容器（只在有项目时显示） -->
+    <div v-if="projects.length > 0" class="cards-container" :class="{ expanded: isExpanded }" :style="containerStyle">
       <div 
         v-for="(project, index) in projects" 
         :key="project.simulation_id"
@@ -76,12 +77,6 @@
       </div>
     </div>
 
-    <!-- 空状态 -->
-    <div v-if="projects.length === 0 && !loading" class="empty-state">
-      <span class="empty-icon">◇</span>
-      <span class="empty-text">暂无历史项目</span>
-    </div>
-
     <!-- 加载状态 -->
     <div v-if="loading" class="loading-state">
       <span class="loading-spinner"></span>
@@ -420,6 +415,12 @@ onUnmounted(() => {
   overflow: visible;
 }
 
+/* 无项目时简化显示 */
+.history-database.no-projects {
+  min-height: auto;
+  padding: 40px 0 20px;
+}
+
 /* 技术网格背景 */
 .tech-grid-bg {
   position: absolute;