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.
This commit is contained in:
666ghj 2026-01-09 11:12:10 +08:00
parent cdf13739a6
commit 5e865c0234

View file

@ -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;