From d7169bac91fe3b6633a358f6b6a516ca99de109e Mon Sep 17 00:00:00 2001
From: 666ghj <670939375@qq.com>
Date: Fri, 9 Jan 2026 10:49:23 +0800
Subject: [PATCH] refactor(HistoryDatabase): dynamically calculate container
 height based on card expansion state

- Introduced a computed property to adjust the container's minimum height based on the number of cards and expansion state.
- Removed static min-height styles to enhance responsiveness and visual consistency.
---
 frontend/src/components/HistoryDatabase.vue | 30 ++++++++++++++++-----
 1 file changed, 23 insertions(+), 7 deletions(-)

diff --git a/frontend/src/components/HistoryDatabase.vue b/frontend/src/components/HistoryDatabase.vue
index 8eec189..954fc5c 100644
--- a/frontend/src/components/HistoryDatabase.vue
+++ b/frontend/src/components/HistoryDatabase.vue
@@ -17,7 +17,7 @@
     </div>
 
     <!-- 卡片容器 -->
-    <div class="cards-container" :class="{ expanded: isExpanded }">
+    <div class="cards-container" :class="{ expanded: isExpanded }" :style="containerStyle">
       <div 
         v-for="(project, index) in projects" 
         :key="project.simulation_id"
@@ -91,7 +91,7 @@
 </template>
 
 <script setup>
-import { ref, onMounted, onUnmounted } from 'vue'
+import { ref, computed, onMounted, onUnmounted } from 'vue'
 import { useRouter } from 'vue-router'
 import { getSimulationHistory } from '../api/simulation'
 
@@ -113,6 +113,26 @@ const CARD_WIDTH = 280
 const CARD_HEIGHT = 280 
 const CARD_GAP = 24
 
+// 动态计算容器高度样式
+const containerStyle = computed(() => {
+  if (!isExpanded.value) {
+    // 折叠态：固定高度
+    return { minHeight: '420px' }
+  }
+  
+  // 展开态：根据卡片数量动态计算高度
+  const total = projects.value.length
+  if (total === 0) {
+    return { minHeight: '280px' }
+  }
+  
+  const rows = Math.ceil(total / CARDS_PER_ROW)
+  // 计算实际需要的高度：行数 * 卡片高度 + (行数-1) * 间距 + 额外padding
+  const expandedHeight = rows * CARD_HEIGHT + (rows - 1) * CARD_GAP + 40
+  
+  return { minHeight: `${expandedHeight}px` }
+})
+
 // 获取卡片样式
 const getCardStyle = (index) => {
   const total = projects.value.length
@@ -441,13 +461,9 @@ onUnmounted(() => {
   display: flex;
   justify-content: center;
   align-items: flex-start;
-  min-height: 420px;
   padding: 0 40px;
   transition: min-height 700ms cubic-bezier(0.23, 1, 0.32, 1);
-}
-
-.cards-container.expanded {
-  min-height: 620px;
+  /* min-height 由 JS 动态计算，根据卡片数量自适应 */
 }
 
 /* 项目卡片 */