fix: 优化消息页面状态loading及详情页按钮处理

anxin
Commit 2c67707a authored Feb 24, 2026 by anxin
Showing 3 changed files with 148 additions and 32 deletions
package-lock.json
pages/message/index.vue
subPackages/accountGroup/pages/message/messageOperation.vue
--- a/package-lock.json
+++ b/package-lock.json
 {
+	"name": "CvaYap-app",
+	"lockfileVersion": 3,
 	"requires": true,
-	"lockfileVersion": 1,
+	"packages": {
+		"": {
 			"dependencies": {
-		"@intlify/core-base": {
+				"dayjs": "^1.11.18",
+				"echarts": "^5.6.0",
+				"pinyin-pro": "^3.26.0",
+				"tslib": "^2.8.1",
+				"vue-i18n": "^11.1.3",
+				"zrender": "^5.6.1"
+			}
+		},
+		"node_modules/@intlify/core-base": {
 			"version": "11.1.3",
 			"resolved": "https://registry.npmmirror.com/@intlify/core-base/-/core-base-11.1.3.tgz",
 			"integrity": "sha512-cMuHunYO7LE80azTitcvEbs1KJmtd6g7I5pxlApV3Jo547zdO3h31/0uXpqHc+Y3RKt1wo2y68RGSx77Z1klyA==",
-			"requires": {
+			"dependencies": {
 				"@intlify/message-compiler": "11.1.3",
 				"@intlify/shared": "11.1.3"
+			},
+			"engines": {
+				"node": ">= 16"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/kazupon"
 			}
 		},
-		"@intlify/message-compiler": {
+		"node_modules/@intlify/message-compiler": {
 			"version": "11.1.3",
 			"resolved": "https://registry.npmmirror.com/@intlify/message-compiler/-/message-compiler-11.1.3.tgz",
 			"integrity": "sha512-7rbqqpo2f5+tIcwZTAG/Ooy9C8NDVwfDkvSeDPWUPQW+Dyzfw2o9H103N5lKBxO7wxX9dgCDjQ8Umz73uYw3hw==",
-			"requires": {
+			"dependencies": {
 				"@intlify/shared": "11.1.3",
 				"source-map-js": "^1.0.2"
+			},
+			"engines": {
+				"node": ">= 16"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/kazupon"
 			}
 		},
-		"@intlify/shared": {
+		"node_modules/@intlify/shared": {
 			"version": "11.1.3",
 			"resolved": "https://registry.npmmirror.com/@intlify/shared/-/shared-11.1.3.tgz",
-			"integrity": "sha512-pTFBgqa/99JRA2H1qfyqv97MKWJrYngXBA/I0elZcYxvJgcCw3mApAoPW3mJ7vx3j+Ti0FyKUFZ4hWxdjKaxvA=="
+			"integrity": "sha512-pTFBgqa/99JRA2H1qfyqv97MKWJrYngXBA/I0elZcYxvJgcCw3mApAoPW3mJ7vx3j+Ti0FyKUFZ4hWxdjKaxvA==",
+			"engines": {
+				"node": ">= 16"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/kazupon"
+			}
 		},
-		"@vue/devtools-api": {
+		"node_modules/@vue/devtools-api": {
 			"version": "6.6.4",
 			"resolved": "https://registry.npmmirror.com/@vue/devtools-api/-/devtools-api-6.6.4.tgz",
 			"integrity": "sha512-sGhTPMuXqZ1rVOk32RylztWkfXTRhuS7vgAKv0zjqk8gbsHkJ7xfFf+jbySxt7tWObEJwyKaHMikV/WGDiQm8g=="
 		},
-		"dayjs": {
+		"node_modules/dayjs": {
 			"version": "1.11.18",
 			"resolved": "https://registry.npmmirror.com/dayjs/-/dayjs-1.11.18.tgz",
 			"integrity": "sha512-zFBQ7WFRvVRhKcWoUh+ZA1g2HVgUbsZm9sbddh8EC5iv93sui8DVVz1Npvz+r6meo9VKfa8NyLWBsQK1VvIKPA=="
 		},
-		"echarts": {
+		"node_modules/echarts": {
 			"version": "5.6.0",
-			"requires": {
+			"integrity": "sha512-oTbVTsXfKuEhxftHqL5xprgLoc0k7uScAwtryCgWF6hPYFLRwOUHiFmHGCBKP5NPFNkDVopOieyUqYGH8Fa3kA==",
+			"dependencies": {
 				"tslib": "2.3.0",
 				"zrender": "5.6.1"
+			}
 		},
-			"dependencies": {
+		"node_modules/echarts/node_modules/tslib": {
-				"tslib": {
 			"version": "2.3.0",
 			"resolved": "https://registry.npmmirror.com/tslib/-/tslib-2.3.0.tgz",
 			"integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg=="
-				}
-			}
 		},
-		"pinyin-pro": {
+		"node_modules/pinyin-pro": {
-			"version": "3.26.0"
+			"version": "3.26.0",
+			"integrity": "sha512-HcBZZb0pvm0/JkPhZHWA5Hqp2cWHXrrW/WrV+OtaYYM+kf35ffvZppIUuGmyuQ7gDr1JDJKMkbEE+GN0wfMoGg=="
 		},
-		"source-map-js": {
+		"node_modules/source-map-js": {
 			"version": "1.2.1",
 			"resolved": "https://registry.npmmirror.com/source-map-js/-/source-map-js-1.2.1.tgz",
-			"integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA=="
+			"integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==",
+			"engines": {
+				"node": ">=0.10.0"
+			}
 		},
-		"tslib": {
+		"node_modules/tslib": {
-			"version": "2.8.1"
+			"version": "2.8.1",
+			"integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w=="
 		},
-		"vue-i18n": {
+		"node_modules/vue-i18n": {
 			"version": "11.1.3",
-			"requires": {
+			"integrity": "sha512-Pcylh9z9S5+CJAqgbRZ3EKxFIBIrtY5YUppU722GIT65+Nukm0TCqiQegZnNLCZkXGthxe0cpqj0AoM51H+6Gw==",
+			"deprecated": "This version is NOT deprecated. Previous deprecation was a mistake.",
+			"dependencies": {
 				"@intlify/core-base": "11.1.3",
 				"@intlify/shared": "11.1.3",
 				"@vue/devtools-api": "^6.5.0"
+			},
+			"engines": {
+				"node": ">= 16"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/kazupon"
+			},
+			"peerDependencies": {
+				"vue": "^3.0.0"
 			}
 		},
-		"zrender": {
+		"node_modules/zrender": {
 			"version": "5.6.1",
-			"requires": {
+			"integrity": "sha512-OFXkDJKcrlx5su2XbzJvj/34Q3m6PvyCZkVPHGYpcCJ52ek4U/ymZyfuV1nKE23AyBJ51E/6Yr0mhZ7xGTO4ag==",
+			"dependencies": {
 				"tslib": "2.3.0"
+			}
 		},
-			"dependencies": {
+		"node_modules/zrender/node_modules/tslib": {
-				"tslib": {
 			"version": "2.3.0",
 			"resolved": "https://registry.npmmirror.com/tslib/-/tslib-2.3.0.tgz",
 			"integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg=="
 		}
 	}
-		}
-	}
 }
--- a/pages/message/index.vue
+++ b/pages/message/index.vue
@@ -39,6 +39,17 @@
    <view style="height: 230rpx; background-color: #ffffff"></view>
    <view class="h-c-container">
      <view class="rank">
+        <!-- 骨架屏 loading -->
+        <view v-if="isLoading" class="skeleton-list">
+          <view v-for="i in 7" :key="i" class="skeleton-item">
+            <view class="skeleton-icon"></view>
+            <view class="skeleton-content">
+              <view class="skeleton-line skeleton-short"></view>
+              <view class="skeleton-line skeleton-long"></view>
+            </view>
+          </view>
+        </view>
+        <template v-else>
          <MessageList ref="messageListRef" @itemClick="handleMessageClick" @selectionChange="handleSelectionChange"
            @editModeChange="handleEditModeChange" @falseAlarm="handleFalseAlarm" @confirm="handleConfirm"
            v-if="!isShowEmptyFlag" :messages="messageList">
@@ -49,6 +60,7 @@
              t("maintenance.monitor.project.empty.text")
            }}</text>
          </view>
+        </template>
        <!-- <ChartsNvue style="height: 580px;flex:none" ref="rankingRef" /> -->
      </view>
      <uv-load-more v-if="messageList.length > pageSize" :status="loadMoreStatus" :loading-text="loadingText"
@@ -122,6 +134,8 @@
 const messageList = ref([]);
 // 是否显示空数据
  const isShowEmptyFlag = ref(false);
+  // 是否正在加载
+  const isLoading = ref(true);
  const scrollTop = ref(0);
  // 保存滚动位置的键
@@ -290,6 +304,7 @@ onMounted(() => {
      messageList.value = [];
      isEditMode.value = false;
      messageListRef.value && messageListRef.value.toggleEditMode('force');
+      isLoading.value = true;
    }
    loadMoreStatus.value = "loading";
@@ -318,6 +333,9 @@ onMounted(() => {
        undefined,
      startTime: params.value.startDate,
      endTime: params.value.endDate,
+      // mock
+      // startTime: '2025-01-01',
+      // endTime: '2025-12-31',
      pageNum: pageNum.value,
      pageSize: pageSize.value,
    };
@@ -409,6 +427,8 @@ onMounted(() => {
      // }, 1000);
    } catch (error) {
      uni.stopPullDownRefresh()
+    } finally {
+      isLoading.value = false;
    }
  };
@@ -645,4 +665,56 @@ onShow(() => {
    border-radius: 16rpx;
    flex: 1;
  }
+  .skeleton-list {
+    padding: 0;
+  }
+  .skeleton-item {
+    display: flex;
+    padding: 32rpx 0;
+    border-bottom: 2rpx solid #eef0f3;
+    align-items: center;
+    gap: 26rpx;
+    &:last-child {
+      border-bottom: none;
+    }
+  }
+  @keyframes skeleton-pulse {
+    0%, 100% { opacity: 1; }
+    50% { opacity: 0.4; }
+  }
+  .skeleton-icon {
+    width: 96rpx;
+    height: 96rpx;
+    border-radius: 50%;
+    flex-shrink: 0;
+    background-color: #ebebeb;
+    animation: skeleton-pulse 1.4s ease-in-out infinite;
+  }
+  .skeleton-content {
+    flex: 1;
+  }
+  .skeleton-line {
+    height: 28rpx;
+    border-radius: 8rpx;
+    margin-bottom: 18rpx;
+    background-color: #ebebeb;
+    animation: skeleton-pulse 1.4s ease-in-out infinite;
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+  .skeleton-short {
+    width: 40%;
+  }
+  .skeleton-long {
+    width: 70%;
+  }
 </style>
--- a/subPackages/accountGroup/pages/message/messageOperation.vue
+++ b/subPackages/accountGroup/pages/message/messageOperation.vue
@@ -90,14 +90,14 @@
        <!-- 底部按钮 -->
        <view class="action-buttons" v-if="isResolveFlag == 1">
-          <view class="btn btn-ignore" @click="handleIgnore">
+          <!-- <view class="btn btn-ignore" @click="handleIgnore">
            <image
              src="/static/message/undo.png"
              mode="aspectFit"
              class="btn-icon"
            ></image>
            <text class="btn-text">{{ t('maintenance.monitor.project.ignore') }}</text>
-          </view>
+          </view> -->
          <view
            class="btn btn-false"
            @click="handleOpenAlarmHandlePop('FALSE_ALARM')"
@@ -424,6 +424,7 @@ const handleIgnore = () => {
      justify-content: space-between;
      padding: 30rpx 8rpx;
      margin-top: auto;
+      gap: 24rpx;
      .btn {
        display: flex;
@@ -432,6 +433,7 @@ const handleIgnore = () => {
        font-weight: 400;
        font-size: 28rpx;
        color: #4e515e;
+        height: 76rpx;
        &.btn-ignore {
          flex-direction: column;
@@ -448,7 +450,6 @@ const handleIgnore = () => {
        &.btn-false {
          flex: 1;
-          margin: 0 20rpx 0 54rpx;
          background: rgba(209, 218, 227, 0.4);
          border-radius: 48rpx 48rpx 48rpx 48rpx;
          font-weight: 400;