jingrowlocal/jingrow-framework
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

优化pagetype列表页加载逻辑

Browse Source
This commit is contained in:
jingrow 2025-11-01 17:47:34 +08:00
parent 962d147fad
commit e706aae6a7
1 changed files with 72 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

87
apps/jingrow/frontend/src/core/pagetype/GenericListPage.vue
View File

@ -110,12 +110,19 @@
@filter-change="onFilterChange" @filter-change="onFilterChange"
/> />
<div v-if="loading" class="loading"> <!-- 列表页优化：保留上次内容，显示轻微加载指示，提供更好的连续浏览体验 -->
<i class="fa fa-spinner fa-spin"></i> {{ t('Loading...') }} <div class="list-content-wrapper" :class="{ 'loading-state': loading }">
</div> <!-- 加载指示（不遮挡内容） -->
<div v-else> <div v-if="loading && rows.length === 0" class="loading-full">
<!-- 卡片视图 --> <i class="fa fa-spinner fa-spin"></i> {{ t('Loading...') }}
<div v-if="viewMode === 'card'" class="agent-grid"> </div>
<div v-else>
<!-- 顶部轻微加载指示（仅在已有数据时显示） -->
<div v-if="loading && rows.length > 0" class="loading-overlay">
<i class="fa fa-spinner fa-spin"></i>
</div>
<!-- 卡片视图 -->
<div v-if="viewMode === 'card'" class="agent-grid">
<div <div
v-for="row in filteredRows" v-for="row in filteredRows"
:key="row.name" :key="row.name"
@ -197,13 +204,13 @@
</template> </template>
</div> </div>
</div> </div>
</div> </div>
<div v-if="viewMode === 'card'" class="list-pagination"> <div v-if="viewMode === 'card'" class="list-pagination">
<n-pagination v-model:page="page" :page-count="pageCount" size="small" /> <n-pagination v-model:page="page" :page-count="pageCount" size="small" />
</div> </div>
<!-- 列表视图 --> <!-- 列表视图 -->
<div v-else class="agent-list" :class="{ 'has-image': imageFieldName }"> <div v-else class="agent-list" :class="{ 'has-image': imageFieldName }">
<div class="list-header"> <div class="list-header">
<div class="col-checkbox"> <div class="col-checkbox">
<input <input
@ -292,10 +299,11 @@
</div> </div>
</div> </div>
</div> </div>
<div class="list-pagination"> <div v-if="viewMode === 'list'" class="list-pagination">
<n-pagination v-model:page="page" :page-count="pageCount" size="small" /> <n-pagination v-model:page="page" :page-count="pageCount" size="small" />
</div> </div>
</div> </div>
</div>
</div> </div>
</div> </div>
</div> </div>
@ -1177,8 +1185,57 @@ function formatDisplayValue(value: any, fieldName: string) {
.agent-list { background: white; border: 1px solid #e5e7eb; border-radius: 12px; overflow: hidden; } .agent-list { background: white; border: 1px solid #e5e7eb; border-radius: 12px; overflow: hidden; }
.list-pagination { padding: 16px 20px; border-top: 1px solid #e5e7eb; background: #f9fafb; display: flex; justify-content: center; } .list-pagination { padding: 16px 20px; border-top: 1px solid #e5e7eb; background: #f9fafb; display: flex; justify-content: center; }
.loading { display: flex; align-items: center; justify-content: center; padding: 60px 20px; color: #6b7280; font-size: 16px; } /* 列表内容包装器 */
.loading i { margin-right: 8px; } .list-content-wrapper {
position: relative;
}
.list-content-wrapper.loading-state {
opacity: 0.7;
pointer-events: none;
}
/* 首次加载时显示全屏加载 */
.loading-full {
display: flex;
align-items: center;
justify-content: center;
padding: 60px 20px;
color: #6b7280;
font-size: 16px;
}
.loading-full i {
margin-right: 8px;
}
/* 已有数据时的轻微加载指示（右上角浮动） */
.loading-overlay {
position: absolute;
top: 12px;
right: 12px;
z-index: 10;
display: flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
background: rgba(255, 255, 255, 0.95);
border-radius: 50%;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
color: #3b82f6;
font-size: 14px;
animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
@keyframes pulse {
0%, 100% {
opacity: 1;
}
50% {
opacity: 0.7;
}
}
/* 卡片视图样式（对齐 AgentList 设计） */ /* 卡片视图样式（对齐 AgentList 设计） */
.agent-grid { .agent-grid {