From e706aae6a736879a14a1d5389589fdb3bcb760ff Mon Sep 17 00:00:00 2001
From: jingrow <support@jingrow.com>
Date: Sat, 1 Nov 2025 17:47:34 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96pagetype=E5=88=97=E8=A1=A8?=
 =?UTF-8?q?=E9=A1=B5=E5=8A=A0=E8=BD=BD=E9=80=BB=E8=BE=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/core/pagetype/GenericListPage.vue     | 87 +++++++++++++++----
 1 file changed, 72 insertions(+), 15 deletions(-)

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"
       />
 
-      <div v-if="loading" class="loading">
-        <i class="fa fa-spinner fa-spin"></i> {{ t('Loading...') }}
-      </div>
-      <div v-else>
-        <!-- 卡片视图 -->
-        <div v-if="viewMode === 'card'" class="agent-grid">
+      <!-- 列表页优化：保留上次内容，显示轻微加载指示，提供更好的连续浏览体验 -->
+      <div class="list-content-wrapper" :class="{ 'loading-state': loading }">
+        <!-- 加载指示（不遮挡内容） -->
+        <div v-if="loading && rows.length === 0" class="loading-full">
+          <i class="fa fa-spinner fa-spin"></i> {{ t('Loading...') }}
+        </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 
             v-for="row in filteredRows" 
             :key="row.name" 
@@ -197,13 +204,13 @@
               </template>
             </div>
           </div>
-        </div>
-        <div v-if="viewMode === 'card'" class="list-pagination">
-          <n-pagination v-model:page="page" :page-count="pageCount" size="small" />
-        </div>
+          </div>
+          <div v-if="viewMode === 'card'" class="list-pagination">
+            <n-pagination v-model:page="page" :page-count="pageCount" size="small" />
+          </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="col-checkbox">
               <input
@@ -292,10 +299,11 @@
               </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" />
           </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; }
 .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 {