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> <template>
<div <div
class="history-database" class="history-database"
:class="{ 'no-projects': projects.length === 0 && !loading }"
ref="historyContainer" 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="grid-pattern"></div>
<div class="gradient-overlay"></div> <div class="gradient-overlay"></div>
</div> </div>
@ -16,8 +17,8 @@
<div class="section-line"></div> <div class="section-line"></div>
</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 <div
v-for="(project, index) in projects" v-for="(project, index) in projects"
:key="project.simulation_id" :key="project.simulation_id"
@ -76,12 +77,6 @@
</div> </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"> <div v-if="loading" class="loading-state">
<span class="loading-spinner"></span> <span class="loading-spinner"></span>
@ -420,6 +415,12 @@ onUnmounted(() => {
overflow: visible; overflow: visible;
} }
/* 无项目时简化显示 */
.history-database.no-projects {
min-height: auto;
padding: 40px 0 20px;
}
/* 技术网格背景 */ /* 技术网格背景 */
.tech-grid-bg { .tech-grid-bg {
position: absolute; position: absolute;