From e6da45ee63e61c5e82ceb4ab8f23df9f6f1b1d6f Mon Sep 17 00:00:00 2001
From: 666ghj <670939375@qq.com>
Date: Wed, 31 Dec 2025 17:54:39 +0800
Subject: [PATCH] =?UTF-8?q?feat(history):=20=E6=B7=BB=E5=8A=A0=E9=A6=96?=
 =?UTF-8?q?=E9=A1=B5=E5=8E=86=E5=8F=B2=E9=A1=B9=E7=9B=AE=E5=B1=95=E7=A4=BA?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 新增 HistoryDatabase.vue 组件，实现扇形堆叠到网格展开的动画效果
- 后端 simulation.py 添加历史模拟数据 API 支持
- 修复 SimulationManager 过滤隐藏文件问题
- 前端 simulation.js 添加获取历史模拟数据的 API 方法
- Home.vue 集成历史项目展示组件
- 实现正方形网格背景装饰效果
---
 backend/app/api/simulation.py               | 103 +++
 backend/app/services/simulation_manager.py  |   5 +
 frontend/src/api/simulation.js              |   9 +
 frontend/src/components/HistoryDatabase.vue | 670 ++++++++++++++++++++
 frontend/src/views/Home.vue                 |   4 +
 5 files changed, 791 insertions(+)
 create mode 100644 frontend/src/components/HistoryDatabase.vue

diff --git a/backend/app/api/simulation.py b/backend/app/api/simulation.py
index 3e0174b..3a2ff29 100644
--- a/backend/app/api/simulation.py
+++ b/backend/app/api/simulation.py
@@ -809,6 +809,109 @@ def list_simulations():
         }), 500
 
 
+@simulation_bp.route('/history', methods=['GET'])
+def get_simulation_history():
+    """
+    获取历史模拟列表（带项目详情）
+    
+    用于首页历史项目展示，返回包含项目名称、描述等丰富信息的模拟列表
+    
+    Query参数：
+        limit: 返回数量限制（默认20）
+    
+    返回：
+        {
+            "success": true,
+            "data": [
+                {
+                    "simulation_id": "sim_xxxx",
+                    "project_id": "proj_xxxx",
+                    "project_name": "武大舆情分析",
+                    "simulation_requirement": "如果武汉大学发布...",
+                    "status": "completed",
+                    "entities_count": 68,
+                    "profiles_count": 68,
+                    "entity_types": ["Student", "Professor", ...],
+                    "created_at": "2024-12-10",
+                    "updated_at": "2024-12-10",
+                    "total_rounds": 120,
+                    "current_round": 120,
+                    "version": "v1.0.2"
+                },
+                ...
+            ],
+            "count": 7
+        }
+    """
+    try:
+        limit = request.args.get('limit', 20, type=int)
+        
+        manager = SimulationManager()
+        simulations = manager.list_simulations()[:limit]
+        
+        # 增强模拟数据，添加项目详情
+        enriched_simulations = []
+        for sim in simulations:
+            sim_dict = sim.to_dict()
+            
+            # 获取关联的项目信息
+            project = ProjectManager.get_project(sim.project_id)
+            if project:
+                sim_dict["project_name"] = project.name
+                sim_dict["simulation_requirement"] = project.simulation_requirement
+            else:
+                sim_dict["project_name"] = "未知项目"
+                sim_dict["simulation_requirement"] = ""
+            
+            # 获取模拟配置信息
+            config = manager.get_simulation_config(sim.simulation_id)
+            if config:
+                time_config = config.get("time_config", {})
+                sim_dict["total_simulation_hours"] = time_config.get("total_simulation_hours", 0)
+                sim_dict["total_rounds"] = int(
+                    time_config.get("total_simulation_hours", 0) * 60 / 
+                    max(time_config.get("minutes_per_round", 60), 1)
+                )
+            else:
+                sim_dict["total_simulation_hours"] = 0
+                sim_dict["total_rounds"] = 0
+            
+            # 获取运行状态
+            run_state = SimulationRunner.get_run_state(sim.simulation_id)
+            if run_state:
+                sim_dict["current_round"] = run_state.current_round
+                sim_dict["runner_status"] = run_state.runner_status.value
+            else:
+                sim_dict["current_round"] = 0
+                sim_dict["runner_status"] = "idle"
+            
+            # 添加版本号
+            sim_dict["version"] = "v1.0.2"
+            
+            # 格式化日期
+            try:
+                created_date = sim_dict.get("created_at", "")[:10]
+                sim_dict["created_date"] = created_date
+            except:
+                sim_dict["created_date"] = ""
+            
+            enriched_simulations.append(sim_dict)
+        
+        return jsonify({
+            "success": True,
+            "data": enriched_simulations,
+            "count": len(enriched_simulations)
+        })
+        
+    except Exception as e:
+        logger.error(f"获取历史模拟失败: {str(e)}")
+        return jsonify({
+            "success": False,
+            "error": str(e),
+            "traceback": traceback.format_exc()
+        }), 500
+
+
 @simulation_bp.route('/<simulation_id>/profiles', methods=['GET'])
 def get_simulation_profiles(simulation_id: str):
     """
diff --git a/backend/app/services/simulation_manager.py b/backend/app/services/simulation_manager.py
index 830762b..96c496f 100644
--- a/backend/app/services/simulation_manager.py
+++ b/backend/app/services/simulation_manager.py
@@ -465,6 +465,11 @@ class SimulationManager:
         
         if os.path.exists(self.SIMULATION_DATA_DIR):
             for sim_id in os.listdir(self.SIMULATION_DATA_DIR):
+                # 跳过隐藏文件（如 .DS_Store）和非目录文件
+                sim_path = os.path.join(self.SIMULATION_DATA_DIR, sim_id)
+                if sim_id.startswith('.') or not os.path.isdir(sim_path):
+                    continue
+                
                 state = self._load_simulation_state(sim_id)
                 if state:
                     if project_id is None or state.project_id == project_id:
diff --git a/frontend/src/api/simulation.js b/frontend/src/api/simulation.js
index 96404c6..f878586 100644
--- a/frontend/src/api/simulation.js
+++ b/frontend/src/api/simulation.js
@@ -176,3 +176,12 @@ export const interviewAgents = (data) => {
   return requestWithRetry(() => service.post('/api/simulation/interview/batch', data), 3, 1000)
 }
 
+/**
+ * 获取历史模拟列表（带项目详情）
+ * 用于首页历史项目展示
+ * @param {number} limit - 返回数量限制
+ */
+export const getSimulationHistory = (limit = 20) => {
+  return service.get('/api/simulation/history', { params: { limit } })
+}
+
diff --git a/frontend/src/components/HistoryDatabase.vue b/frontend/src/components/HistoryDatabase.vue
new file mode 100644
index 0000000..d462839
--- /dev/null
+++ b/frontend/src/components/HistoryDatabase.vue
@@ -0,0 +1,670 @@
+<template>
+  <div 
+    class="history-database"
+    @mouseenter="handleMouseEnter"
+    @mouseleave="handleMouseLeave"
+  >
+    <!-- 背景装饰：技术网格线（使用CSS背景，固定间距正方形网格） -->
+    <div class="tech-grid-bg">
+      <div class="grid-pattern"></div>
+      <div class="gradient-overlay"></div>
+    </div>
+
+    <!-- CTA 按钮 -->
+    <div 
+      class="cta-button" 
+      :style="{ transform: `translateY(${ctaOffset}px)` }"
+      @click="toggleExpand"
+    >
+      <div class="cta-inner">
+        <span class="cta-icon">◎</span>
+        <span class="cta-text">HISTORY DATABASE ({{ projects.length }})</span>
+        <span class="cta-arrow" :class="{ expanded: isExpanded }">→</span>
+      </div>
+    </div>
+
+    <!-- 卡片容器 -->
+    <div class="cards-container" :class="{ expanded: isExpanded }">
+      <div 
+        v-for="(project, index) in projects" 
+        :key="project.simulation_id"
+        class="project-card"
+        :class="{ expanded: isExpanded, hovering: hoveringCard === index }"
+        :style="getCardStyle(index)"
+        @mouseenter="hoveringCard = index"
+        @mouseleave="hoveringCard = null"
+        @click="navigateToProject(project)"
+      >
+        <!-- 卡片头部：ID和状态 -->
+        <div class="card-header">
+          <span class="card-id">ID_{{ String(index + 1).padStart(3, '0') }}</span>
+          <span class="card-status" :class="getStatusClass(project.status)">
+            <span class="status-dot">●</span> {{ getStatusText(project.status) }}
+          </span>
+        </div>
+
+        <!-- 卡片图片区域（带角落装饰） -->
+        <div class="card-image-wrapper">
+          <!-- 角落装饰 - 取景框风格 -->
+          <div class="corner-mark top-left-only"></div>
+
+          <!-- 图片 -->
+          <img 
+            class="card-image"
+            :src="getRandomImageUrl(project.simulation_id, index)"
+            :alt="project.project_name"
+            loading="lazy"
+            @error="handleImageError($event, index)"
+          />
+        </div>
+
+        <!-- 卡片标题 -->
+        <h3 class="card-title">{{ project.project_name || 'Unnamed Project' }}</h3>
+
+        <!-- 卡片描述 -->
+        <p class="card-desc">{{ truncateText(project.simulation_requirement, 55) }}</p>
+
+        <!-- 卡片底部 -->
+        <div class="card-footer">
+          <span class="card-date">{{ formatDate(project.created_at) }}</span>
+          <span class="card-version">{{ project.version || 'v1.0.2' }}</span>
+        </div>
+        
+        <!-- 底部装饰线 (hover时展开) -->
+        <div class="card-bottom-line"></div>
+      </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>
+      <span class="loading-text">加载中...</span>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, onMounted, onUnmounted } from 'vue'
+import { useRouter } from 'vue-router'
+import { getSimulationHistory } from '../api/simulation'
+
+const router = useRouter()
+
+// 状态
+const projects = ref([])
+const loading = ref(true)
+const isExpanded = ref(false)
+const hoveringCard = ref(null)
+const ctaOffset = ref(0)
+const imageErrors = ref({}) // 追踪图片加载错误
+
+// 卡片布局配置 - 调整为更宽的比例
+const CARDS_PER_ROW = 4
+const CARD_WIDTH = 280  
+const CARD_HEIGHT = 280 
+const CARD_GAP = 24
+const EXPANDED_ROW_HEIGHT = 230 // 行高 230px (Requirements)
+const EXPANDED_COL_WIDTH = 280 // 列宽 (Requirements spacing 280px)
+
+// 随机图片服务配置（中国可访问）
+const IMAGE_SERVICES = {
+  // Lorem Picsum - 国际服务，中国大部分地区可访问
+  picsum: (seed, width, height) => 
+    `https://picsum.photos/seed/${seed}/${width}/${height}`,
+}
+
+// 生成随机图片URL - 调整图片比例为超扁平 (280x64)
+const getRandomImageUrl = (simulationId, index) => {
+  if (imageErrors.value[index]) {
+    return null 
+  }
+  const seed = simulationId || `project-${index}`
+  // 宽280，高64，约4.4:1比例，极度扁平
+  return IMAGE_SERVICES.picsum(seed, 280, 64)
+}
+
+// 处理图片加载错误
+const handleImageError = (event, index) => {
+  imageErrors.value[index] = true
+  event.target.style.display = 'none'
+}
+
+// 计算 CTA 按钮偏移
+const calculateCtaOffset = () => {
+  if (!isExpanded.value) {
+    ctaOffset.value = 0
+    return
+  }
+  
+  const rowCount = Math.ceil(projects.value.length / CARDS_PER_ROW)
+  // 调整 CTA 偏移量以适应网格高度
+  ctaOffset.value = -(rowCount * EXPANDED_ROW_HEIGHT + 100)
+}
+
+// 获取卡片样式
+const getCardStyle = (index) => {
+  const total = projects.value.length
+  
+  if (isExpanded.value) {
+    // 展开态：网格布局
+    // 物理特性：Easing: cubic-bezier(0.23, 1, 0.32, 1), Duration: 700ms
+    const transition = 'transform 700ms cubic-bezier(0.23, 1, 0.32, 1), opacity 700ms cubic-bezier(0.23, 1, 0.32, 1), box-shadow 0.3s ease, border-color 0.3s ease'
+
+    const col = index % CARDS_PER_ROW
+    const row = Math.floor(index / CARDS_PER_ROW)
+    
+    // 计算当前行的卡片数量，确保每行居中
+    const currentRowStart = row * CARDS_PER_ROW
+    const currentRowCards = Math.min(CARDS_PER_ROW, total - currentRowStart)
+    
+    // 水平居中偏移
+    // 间距 280px (Based on CARD_WIDTH being 280px. Assuming standard grid gap is included or minimal)
+    // Using CARD_WIDTH + CARD_GAP for spacing calculation to be safe, but requirements said "spacing 280px".
+    // If spacing means column width, then grid width is ColWidth * count.
+    // Let's stick to the previous logic but ensure center alignment.
+    
+    const rowWidth = currentRowCards * CARD_WIDTH + (currentRowCards - 1) * CARD_GAP
+    const containerWidth = CARDS_PER_ROW * CARD_WIDTH + (CARDS_PER_ROW - 1) * CARD_GAP // Full width of a complete row
+    
+    // Calculate offset to center the current row relative to the full container width
+    // Actually, the requirements say "translateX: based on colIndex, centered per row"
+    // So for a row with 3 items, they should be centered.
+    // The visual center is 0. 
+    // Leftmost item x = - (rowWidth / 2) + (CARD_WIDTH / 2)
+    // Next item x += CARD_WIDTH + CARD_GAP
+    
+    const startX = -(rowWidth / 2) + (CARD_WIDTH / 2)
+    const offsetX = (col % CARDS_PER_ROW) * (CARD_WIDTH + CARD_GAP) // offset within the row
+    
+    // Wait, the calculation needs to be based on the column index WITHIN the current row (0 to currentRowCards-1)
+    // Since col = index % 4, it resets for each row.
+    const colInRow = index % CARDS_PER_ROW
+    const x = startX + colInRow * (CARD_WIDTH + CARD_GAP)
+    
+    // translateY: 向上堆叠逻辑. 行高 230px.
+    // Row 0 is at the bottom? "Upward stacking logic (first row pushed up)".
+    // Assuming "first row pushed up" means visually higher. 
+    // In CSS translate Y, negative is up.
+    // So row 0 should have the most negative Y? Or row 0 is at the bottom and subsequent rows stack up?
+    // "向上生长：如果卡片超过4个，生成的第二行应该在第一行上方" -> Row 1 is above Row 0.
+    // So Row 0 is at y=0 (or base), Row 1 is at y = -230px, etc.
+    const y = -(row * EXPANDED_ROW_HEIGHT)
+
+    return {
+      transform: `translate(${x}px, ${y}px) rotate(0deg) scale(1)`,
+      zIndex: 100 + index, // Requirements: 100 + gridIndex
+      opacity: 1,
+      transition: transition
+    }
+  } else {
+    // 折叠态：扇形堆叠
+    // 物理特性：Easing: cubic-bezier(0.23, 1, 0.32, 1), Duration: 700ms
+    const transition = 'transform 700ms cubic-bezier(0.23, 1, 0.32, 1), opacity 700ms cubic-bezier(0.23, 1, 0.32, 1), box-shadow 0.3s ease, border-color 0.3s ease'
+
+    const centerIndex = (total - 1) / 2 // Center index (float)
+    const offset = index - centerIndex // Offset from center
+    
+    // translateX: offset * 35px
+    const x = offset * 35
+    
+    // translateY: 130px + Math.abs(offset) * 8px
+    const y = 130 + Math.abs(offset) * 8
+    
+    // rotate: offset * 3deg
+    const r = offset * 3
+    
+    // scale: 0.95 - Math.abs(offset) * 0.05
+    const s = 0.95 - Math.abs(offset) * 0.05
+    
+    return {
+      transform: `translate(${x}px, ${y}px) rotate(${r}deg) scale(${s})`,
+      zIndex: 10 + index, // Requirements: 10 + index
+      opacity: 1, // Collapsed cards are usually fully opaque in the stack
+      transition: transition
+    }
+  }
+}
+
+// 获取状态样式类
+const getStatusClass = (status) => {
+  const statusMap = {
+    completed: 'completed',
+    running: 'processing',
+    ready: 'ready',
+    failed: 'failed',
+    preparing: 'processing',
+    created: 'pending'
+  }
+  return statusMap[status] || 'pending'
+}
+
+// 获取状态文本
+const getStatusText = (status) => {
+  const textMap = {
+    completed: 'COMPLETED',
+    running: 'PROCESSING',
+    ready: 'READY',
+    failed: 'FAILED',
+    preparing: 'PREPARING',
+    created: 'CREATED'
+  }
+  return textMap[status] || 'PENDING'
+}
+
+// 格式化日期
+const formatDate = (dateStr) => {
+  if (!dateStr) return ''
+  try {
+    const date = new Date(dateStr)
+    return date.toISOString().slice(0, 10)
+  } catch {
+    return dateStr?.slice(0, 10) || ''
+  }
+}
+
+// 截断文本
+const truncateText = (text, maxLength) => {
+  if (!text) return ''
+  return text.length > maxLength ? text.slice(0, maxLength) + '...' : text
+}
+
+// 事件处理
+const handleMouseEnter = () => {
+  isExpanded.value = true
+  calculateCtaOffset()
+}
+
+const handleMouseLeave = () => {
+  isExpanded.value = false
+  ctaOffset.value = 0
+}
+
+const toggleExpand = () => {
+  isExpanded.value = !isExpanded.value
+  calculateCtaOffset()
+}
+
+// 导航到项目
+const navigateToProject = (project) => {
+  if (project.status === 'completed' || project.status === 'running' || project.status === 'ready') {
+    router.push({
+      name: 'SimulationRun',
+      params: { simulationId: project.simulation_id }
+    })
+  } else {
+    router.push({
+      name: 'Process',
+      params: { projectId: project.project_id }
+    })
+  }
+}
+
+// 加载历史项目
+const loadHistory = async () => {
+  try {
+    loading.value = true
+    const response = await getSimulationHistory(20)
+    if (response.success) {
+      projects.value = response.data || []
+    }
+  } catch (error) {
+    console.error('加载历史项目失败:', error)
+    projects.value = []
+  } finally {
+    loading.value = false
+  }
+}
+
+onMounted(() => {
+  loadHistory()
+})
+</script>
+
+<style scoped>
+/* 容器 */
+.history-database {
+  position: relative;
+  width: 100%;
+  min-height: 280px;
+  margin-top: 80px;
+  padding: 60px 0 120px;
+  overflow: visible;
+}
+
+/* 技术网格背景 */
+.tech-grid-bg {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  overflow: hidden;
+  pointer-events: none;
+}
+
+/* 使用CSS背景图案创建固定间距的正方形网格 */
+.grid-pattern {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  /* 60px x 60px 的正方形网格 */
+  background-image: 
+    linear-gradient(to right, rgba(0, 0, 0, 0.06) 1px, transparent 1px),
+    linear-gradient(to bottom, rgba(0, 0, 0, 0.06) 1px, transparent 1px);
+  background-size: 60px 60px;
+  background-position: center center;
+}
+
+.gradient-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  /* 四边渐变遮罩，让网格在边缘淡出 */
+  background: 
+    linear-gradient(to right, rgba(255, 255, 255, 0.9) 0%, transparent 15%, transparent 85%, rgba(255, 255, 255, 0.9) 100%),
+    linear-gradient(to bottom, rgba(255, 255, 255, 0.8) 0%, transparent 20%, transparent 80%, rgba(255, 255, 255, 0.8) 100%);
+  pointer-events: none;
+}
+
+/* CTA 按钮 */
+.cta-button {
+  position: relative;
+  z-index: 100;
+  display: flex;
+  justify-content: center;
+  margin-bottom: 48px;
+  transition: transform 700ms cubic-bezier(0.23, 1, 0.32, 1); /* Match card duration */
+  cursor: pointer;
+}
+
+.cta-inner {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 14px 32px;
+  background: #FFFFFF;
+  border: 1px solid #E0E0E0;
+  border-radius: 30px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); /* 加深阴影 */
+  font-family: 'JetBrains Mono', 'SF Mono', monospace;
+  font-size: 0.78rem;
+  font-weight: 600; /* 加粗 */
+  color: #1a1a1a;
+  letter-spacing: 1.2px;
+  transition: all 0.3s ease;
+}
+
+.cta-inner:hover {
+  background: #FAFAFA;
+  border-color: #CCCCCC;
+  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
+  transform: translateY(-2px);
+}
+
+.cta-icon {
+  color: #666; /* 加深颜色 */
+  font-size: 1rem;
+}
+
+.cta-arrow {
+  color: #666; /* 加深颜色 */
+  transition: transform 0.3s ease;
+}
+
+.cta-arrow.expanded {
+  transform: rotate(90deg);
+}
+
+/* 卡片容器 */
+.cards-container {
+  position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: flex-end;
+  min-height: 340px;
+  padding: 0 40px;
+  transition: min-height 700ms cubic-bezier(0.23, 1, 0.32, 1); /* Match card duration */
+}
+
+.cards-container.expanded {
+  min-height: 520px;
+}
+
+/* 项目卡片 - 完全参照参考图 */
+.project-card {
+  position: absolute;
+  width: 280px; /* 调整宽度 */
+  background: #FFFFFF;
+  border: 1px solid #E5E7EB; /* border-gray-200 */
+  border-radius: 0; /* 直角或极小圆角 */
+  padding: 14px; /* 稍微减小内边距，让内容更紧凑 */
+  cursor: pointer;
+  /* Transitions are handled inline for transform/opacity, CSS for others */
+  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); /* shadow-sm */
+  /* Remove transition property from here as it's overridden by inline styles for transform/opacity */
+  /* Add specific transitions for border and shadow */
+  transition: box-shadow 0.3s ease, border-color 0.3s ease, transform 700ms cubic-bezier(0.23, 1, 0.32, 1), opacity 700ms cubic-bezier(0.23, 1, 0.32, 1);
+}
+
+/* 悬停效果 - 黑色粗边框，阴影加深 */
+/* Micro-interaction: Hover: border-black/40 shadow-lg */
+.project-card:hover {
+  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); /* shadow-lg */
+  border-color: rgba(0, 0, 0, 0.4); /* border-black/40 */
+  z-index: 1000 !important;
+}
+
+.project-card.hovering {
+  z-index: 1000 !important;
+}
+
+/* 卡片头部 */
+.card-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 12px;
+  padding-bottom: 12px;
+  border-bottom: 1px solid #F3F4F6; /* 增加分割线 */
+  font-family: 'JetBrains Mono', 'SF Mono', monospace;
+  font-size: 0.7rem;
+}
+
+.card-id {
+  color: #6B7280; /* 加深灰色 */
+  letter-spacing: 0.5px;
+  font-weight: 500;
+}
+
+.card-status {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  font-weight: 600;
+  font-size: 0.65rem;
+}
+
+.status-dot {
+  font-size: 0.5rem;
+}
+
+.card-status.completed {
+  color: #10B981; /* 更鲜艳的绿 */
+}
+
+.card-status.processing {
+  color: #F59E0B;
+}
+
+.card-status.ready {
+  color: #3B82F6;
+}
+
+.card-status.failed {
+  color: #EF4444;
+}
+
+.card-status.pending {
+  color: #9CA3AF;
+}
+
+/* 卡片图片区域 */
+.card-image-wrapper {
+  position: relative;
+  width: 100%;
+  height: 64px; /* 极度压扁，复刻参考图的宽银幕感 */
+  margin-bottom: 12px;
+  overflow: hidden;
+  background: #f0f0f0;
+}
+
+.card-image {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  /* Micro-interaction: Default: opacity-80 grayscale */
+  filter: grayscale(100%); 
+  opacity: 0.8;
+  transition: all 500ms ease; /* Duration 500ms */
+}
+
+/* 悬停时图片变彩色 */
+/* Micro-interaction: Hover: opacity-100 grayscale-0 */
+.project-card:hover .card-image {
+  filter: grayscale(0%);
+  opacity: 1;
+}
+
+/* 角落装饰 - 只保留左上角，颜色加深 */
+.corner-mark.top-left-only {
+  position: absolute;
+  top: 6px;
+  left: 6px;
+  width: 8px;
+  height: 8px;
+  border-top: 1.5px solid rgba(0, 0, 0, 0.4); /* 加粗一点，颜色更深 */
+  border-left: 1.5px solid rgba(0, 0, 0, 0.4);
+  pointer-events: none;
+  z-index: 10;
+}
+
+/* 卡片标题 */
+.card-title {
+  font-family: 'Inter', -apple-system, sans-serif;
+  font-size: 0.9rem; /* 稍微调小一点点 */
+  font-weight: 700;
+  color: #111827;
+  margin: 0 0 6px 0; /* 减小间距 */
+  line-height: 1.4;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  transition: color 0.3s ease;
+}
+
+/* 悬停时标题变蓝 - 参考图细节 */
+.project-card:hover .card-title {
+  color: #2563EB; /* 蓝色 */
+}
+
+/* 卡片描述 */
+.card-desc {
+  font-family: 'Inter', sans-serif;
+  font-size: 0.75rem;
+  color: #6B7280; /* 灰色 */
+  margin: 0 0 16px 0;
+  line-height: 1.5;
+  height: 34px; /* 两行高度 */
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+}
+
+/* 卡片底部 */
+.card-footer {
+  position: relative; /* For absolute positioning of the line */
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding-top: 12px;
+  border-top: 1px solid #F3F4F6; /* 增加分割线 */
+  font-family: 'JetBrains Mono', monospace;
+  font-size: 0.65rem;
+  color: #9CA3AF;
+  font-weight: 500;
+}
+
+/* 底部装饰线 */
+/* Micro-interaction: Height 2px, bg-black, Default w-0, Hover w-full */
+.card-bottom-line {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  height: 2px;
+  width: 0;
+  background-color: #000;
+  transition: width 0.5s cubic-bezier(0.23, 1, 0.32, 1);
+  z-index: 20; /* 确保在内容之上 */
+}
+
+.project-card:hover .card-bottom-line {
+  width: 100%;
+}
+
+/* 空状态 */
+.empty-state, .loading-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 14px;
+  padding: 48px;
+  color: #9CA3AF;
+}
+
+.empty-icon {
+  font-size: 2rem;
+  opacity: 0.5;
+}
+
+.loading-spinner {
+  width: 24px;
+  height: 24px;
+  border: 2px solid #E5E7EB;
+  border-top-color: #6B7280;
+  border-radius: 50%;
+  animation: spin 0.8s linear infinite;
+}
+
+@keyframes spin {
+  to { transform: rotate(360deg); }
+}
+
+/* 响应式 */
+@media (max-width: 1200px) {
+  .project-card {
+    width: 240px;
+  }
+}
+
+@media (max-width: 768px) {
+  .cards-container {
+    padding: 0 20px;
+  }
+  .project-card {
+    width: 200px;
+  }
+}
+</style>
diff --git a/frontend/src/views/Home.vue b/frontend/src/views/Home.vue
index 91cb942..1c0dc00 100644
--- a/frontend/src/views/Home.vue
+++ b/frontend/src/views/Home.vue
@@ -199,6 +199,9 @@
           </div>
         </div>
       </section>
+
+      <!-- 历史项目数据库 -->
+      <HistoryDatabase />
     </div>
   </div>
 </template>
@@ -206,6 +209,7 @@
 <script setup>
 import { ref, computed } from 'vue'
 import { useRouter } from 'vue-router'
+import HistoryDatabase from '../components/HistoryDatabase.vue'
 
 const router = useRouter()