diff --git a/apps/jingrow/frontend/src/core/pagetype/GenericListPage.vue b/apps/jingrow/frontend/src/core/pagetype/GenericListPage.vue index e555215..1b5bdeb 100644 --- a/apps/jingrow/frontend/src/core/pagetype/GenericListPage.vue +++ b/apps/jingrow/frontend/src/core/pagetype/GenericListPage.vue @@ -110,12 +110,19 @@ @filter-change="onFilterChange" /> -
- {{ t('Loading...') }} -
-
- -
+ +
+ +
+ {{ t('Loading...') }} +
+
+ +
+ +
+ +
-
-
- -
+
+
+ +
- -
+ +
-
+
+
@@ -1177,8 +1185,57 @@ function formatDisplayValue(value: any, fieldName: string) { .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; } -.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 设计) */ .agent-grid {