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:
parent
cdf13739a6
commit
5e865c0234
1 changed files with 11 additions and 10 deletions
|
|
@ -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;
|
||||
|
|
|
|||
Loading…
Reference in a new issue