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>
|
<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;
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue