refactor: 优化页面加载状态与组件样式，统一数据加载逻辑

1. 新增通用sleep工具函数
2. 统一使用uh-data-loading组件处理加载/错误状态
3. 优化回到顶部按钮z-index与分类页面加载延迟
4. 重构关于页导航图标样式，优化视觉效果
5. 格式化代码缩进与排版

src/components/uh-scroll-top/uh-scroll-top.vue

@@ -15,7 +15,7 @@
 
 <template>
 	<view
-		class="uh-global-card-glass border fixed bottom-24 right-4 z-90 h-10 w-10 flex items-center justify-center rounded-full text-primary"
+		class="uh-global-card-glass border fixed bottom-24 right-4 z-50 h-10 w-10 flex items-center justify-center rounded-full text-primary"
 		:class="props.customClass" @click="handleScrollTop">
 		<wd-icon name="arrow-up" size="20px" />
 	</view>

src/pages/tabbar/about/about.vue

@@ -106,6 +106,16 @@
 })
 
 /* ---------------- 功能导航 ---------------- */
+/** 图标块浅色背景:品牌深色 rgba 降透明度 → 轻量底色 */
+function toLightBg(rgba: string) {
+  return rgba.replace('0.95)', '0.15)')
+}
+
+/** 图标颜色:品牌深色实色 */
+function toSolidColor(rgba: string) {
+  return rgba.replace('0.95)', '1)')
+}
+
 async function handleGetNavList() {
   const dataVisualAvailable = await usePluginAvailable('plugin-data-statistics')
 
@@ -265,28 +275,33 @@
 </script>
 
 <template>
-	<view class="box-border bg-page min-h-screen w-screen pb-8">
+  <view class="box-border min-h-screen w-screen bg-page pb-8">
     <!-- 头部:博主信息(背景图 + 遮罩 + wave,内容区做状态栏适配) -->
     <view class="blogger-info relative h-76 w-full bg-cover bg-no-repeat" :style="[calcProfileStyle]">
       <!-- 背景遮罩 -->
-			<view class="absolute left-0 top-0 z-0 h-full w-full backdrop-blur-[2rpx] bg-black/30" />
+      <view class="absolute left-0 top-0 z-0 h-full w-full bg-black/30 backdrop-blur-[2rpx]" />
       <view class="relative z-6 h-full flex flex-col items-center justify-center pb-[140rpx] pt-safe">
-				<image class="uh-global-card-glass h-20 w-20 rounded-full" :src="bloggerInfo.avatar"
+        <image
-					mode="aspectFill" />
+          class="uh-global-card-glass h-20 w-20 rounded-full" :src="bloggerInfo.avatar"
+          mode="aspectFill"
+        />
         <view class="mt-4 text-lg text-white font-bold text-shadow-[0_2rpx_8rpx_rgba(0,0,0,0.4)]">
           {{ bloggerInfo.nickname }}
         </view>
         <view
-					class="desc mt-2 px-10 text-center text-[26rpx] text-white/90 leading-relaxed text-shadow-[0_2rpx_8rpx_rgba(0,0,0,0.4)]">
+          class="desc mt-2 px-10 text-center text-[26rpx] text-white/90 leading-relaxed text-shadow-[0_2rpx_8rpx_rgba(0,0,0,0.4)]"
+        >
           {{ bloggerInfo.description || '这个博主很懒，竟然没写介绍~' }}
         </view>
       </view>
-			<image v-if="calcWaveUrl" :src="calcWaveUrl" mode="scaleToFill"
+      <image
-				class="gif-wave absolute bottom-0 left-0 z-99 h-[100rpx] w-full" style="mix-blend-mode: screen;" />
+        v-if="calcWaveUrl" :src="calcWaveUrl" mode="scaleToFill"
+        class="gif-wave absolute bottom-0 left-0 z-99 h-[100rpx] w-full" style="mix-blend-mode: screen;"
+      />
     </view>
 
     <!-- 站点统计(上浮玻璃卡,与头部衔接) -->
-		<view class="uh-global-card-glass border relative flex z-100 mx-4 rounded-2xl -mt-12">
+    <view class="uh-global-card-glass relative z-100 mx-4 flex border rounded-2xl -mt-12">
       <view v-for="item in allStats" :key="item.key" class="flex-1 py-6 text-center">
         <view class="text-lg text-gray-900 font-bold">
           {{ item.value }}
@@ -303,13 +318,17 @@
         {{ group.title }}
       </uh-section-title>
       <view class="nav-wrap uh-global-card-glass mx-4 overflow-hidden rounded-2xl">
-				<view v-for="(nav, index) in group.items" :key="nav.key"
+        <view
+          v-for="(nav, index) in group.items" :key="nav.key"
           class="nav-item flex items-center justify-between px-4"
-					:class="index < group.items.length - 1 ? 'border-b border-b-solid border-black/5' : ''" @click="handleOnNav(nav)">
+          :class="index < group.items.length - 1 ? 'border-b border-b-solid border-black/5' : ''" @click="handleOnNav(nav)"
+        >
           <view class="nav-left flex items-center gap-3 py-3">
-						<view class="h-9 w-9 flex items-center justify-center rounded-xl"
+            <view
-							:style="{ backgroundColor: nav.bgColor }">
+              class="h-9 w-9 flex items-center justify-center border border-black/5 rounded-xl"
-							<wd-icon :name="nav.icon" size="20px" color="#ffffff" />
+              :style="{ backgroundColor: toLightBg(nav.bgColor) }"
+            >
+              <wd-icon :name="nav.icon" size="20px" :color="toSolidColor(nav.bgColor)" />
             </view>
             <text class="nav-title text-sm text-gray-900 font-bold">{{ nav.title }}</text>
           </view>

src/pages/tabbar/category/category.vue

@@ -4,6 +4,7 @@ import { onPullDownRefresh, onReachBottom } from '@dcloudio/uni-app'
 import { getCategoryList } from '@/api/halo'
 import { useAppConfigStore } from '@/store/appConfig'
 import { checkThumbnailUrl } from '@/utils/url'
+import { sleep } from '@/utils/common'
 import { t } from '@/locale'
 import { DataLoadingStatusEnum, useDataLoadingStatus } from '@/hooks/useDataLoadingStatus'
 import type { ICategory } from '@/api/types/halo'
@@ -50,6 +51,8 @@ function handleInitPage() {
 /* ---------------- 数据加载 ---------------- */
 async function handleGetData() {
   updateLoadingStatus(DataLoadingStatusEnum.Loading)
+  // 增加延迟，提升用户体验
+  await sleep(800)
   // 审核模式
   if (calcAuditModeEnabled.value) {
     const auditCategoryNames = appConfigStore.auditData.spec?.categories || []

src/pages/tabbar/gallery/gallery.vue

@@ -10,7 +10,7 @@
 import { checkImageUrl } from '@/utils/url'
 import { t } from '@/locale'
 import { usePluginAvailable } from '@/utils/plugin'
-	import type { ICategory, IPhoto, IPhotoGroup } from '@/api/types/halo'
+import type { IPhoto, IPhotoGroup } from '@/api/types/halo'
 
 definePage({
   style: {
@@ -136,7 +136,6 @@
   handleGetData(true)
 }
 
-
 /* ---------------- 图片预览 ---------------- */
 function handlePreview(data: IPhoto) {
   const current = dataList.value.findIndex(x => x.metadata.name === data.metadata.name)
@@ -195,49 +194,50 @@
 </script>
 
 <template>
-	<view class="bg-page min-h-screen w-screen flex flex-col pb-6">
+  <view class="min-h-screen w-screen flex flex-col bg-page pb-6">
-		<uh-plugin-unavailable v-if="!uniHaloPluginAvailable" :plugin-id="uniHaloPluginId"
+    <uh-plugin-unavailable
-			error-text="检测到当前插件没有安装或者启用，无法使用图库功能哦，请联系管理员" @on-refresh="handleGetCategory" />
+      v-if="!uniHaloPluginAvailable" :plugin-id="uniHaloPluginId"
+      error-text="检测到当前插件没有安装或者启用，无法使用图库功能哦，请联系管理员" @on-refresh="handleGetCategory"
+    />
     <template v-else>
       <wd-sticky>
         <scroll-view :scroll-x="true" class="w-full whitespace-nowrap pt-3">
-					<view v-for="(cate,index) in category.list" :key="cate.spec.displayName"
+          <view
-						class="uh-global-card-glass border ml-3 mb-1 px-4 py-1 uh-shadow-xs text-sm rounded-2xl inline-block"
+            v-for="(cate, index) in category.list" :key="cate.spec.displayName"
+            class="uh-global-card-glass uh-shadow-xs mb-1 ml-3 inline-block border rounded-2xl px-4 py-1 text-sm"
             :class="{
               'bg-primary text-gray-900 font-bold': index === category.activeIndex,
-						}" @click="handleGetDataByCategory(index,cate)">
+            }" @click="handleGetDataByCategory(index, cate)"
+          >
             {{ cate.spec.displayName }}({{ cate.status?.photoCount ?? 0 }})
           </view>
         </scroll-view>
       </wd-sticky>
 
-			<!-- 骨架屏 -->
+      <!-- 加载/错误占位(统一 uh-data-loading,错误可重试) -->
-			<view v-if="loading === 'loading'" class="loading-wrap box-border p-3">
+      <view v-if="loading !== 'success'" class="box-border p-3">
-				<wd-skeleton :row="4" :animated="true" />
+        <uh-data-loading :loading-status="loading" @refresh="handleGetCategory" />
-			</view>
-
-			<!-- 错误态 -->
-			<view v-else-if="loading === 'error'"
-				class="error-wrap h-[60vh] w-full flex flex-col items-center justify-center gap-6">
-				<wd-empty description="阿偶，获取数据失败了~" />
-				<wd-button size="small" plain type="primary" @click="handleGetCategory()">
-					刷新试试
-				</wd-button>
       </view>
 
       <!-- 内容区域 -->
       <view v-else class="box-border w-full p-3">
-				<view v-if="dataList.length === 0"
+        <view
-					class="h-[70vh] w-full flex items-center justify-center content-empty">
+          v-if="dataList.length === 0"
+          class="h-[70vh] w-full flex items-center justify-center content-empty"
+        >
           <wd-empty description="博主还没有分享图片~" />
         </view>
         <block v-else>
           <!-- 瀑布流(双列) -->
           <view class="grid grid-cols-2 gap-3">
-						<view v-for="(item, index) in dataList" :key="index"
+            <view
-							class="uh-global-card-glass h-38 w-full overflow-hidden rounded-xl">
+              v-for="(item, index) in dataList" :key="index"
-							<image class="h-full w-full" :src="item.spec.url" mode="aspectFill" lazy-load
+              class="uh-global-card-glass h-38 w-full overflow-hidden rounded-xl"
-								@click="handlePreview(item)" />
+            >
+              <image
+                class="h-full w-full" :src="item.spec.url" mode="aspectFill" lazy-load
+                @click="handlePreview(item)"
+              />
             </view>
           </view>
           <view class="load-text w-full py-4 text-center text-xs text-gray-500">

src/pages/tabbar/home/home.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
-	import { computed, ref, watch, onMounted } from 'vue'
+import { computed, onMounted, ref } from 'vue'
-	import { onLoad, onPullDownRefresh, onReachBottom } from '@dcloudio/uni-app'
+import { onPullDownRefresh, onReachBottom } from '@dcloudio/uni-app'
 import { getPostList } from '@/api/halo'
 import { useAppConfigStore } from '@/store/appConfig'
 import { useSettingStore } from '@/store/setting'
@@ -54,10 +54,8 @@
 
 const calcAuditModeEnabled = computed(() => appConfigStore.auditModeEnabled)
 
-
 const globalAppSettings = computed(() => settingStore.settings)
 
-
 /* ---------------- 数据加载 ---------------- */
 async function handleQuery() {
   handleGetArticleList()
@@ -72,8 +70,8 @@
       const res = await getPostList({ page: 1, size: 0, sort: ['spec.publishTime,desc'] })
       const filtered = res.data.items.filter(item => auditPostNames.includes(item.metadata.name))
       articleList.value = filtered.map((item) => {
-					item.owner.avatar = checkAvatarUrl(item.owner.avatar);
+        item.owner.avatar = checkAvatarUrl(item.owner.avatar)
-					return item;
+        return item
       })
       loading.value = 'success'
       loadMoreText.value = t('common.noMore')
@@ -101,8 +99,8 @@
     articleList.value = (isLoadMore.value
       ? articleList.value.concat(res.data.items)
       : res.data.items).map((item) => {
-					item.owner.avatar = checkAvatarUrl(item.owner.avatar);
+      item.owner.avatar = checkAvatarUrl(item.owner.avatar)
-					return item;
+      return item
     })
     loading.value = 'success'
     loadMoreText.value = res.data.hasNext ? t('common.loadMore') : t('common.noMore')
@@ -144,8 +142,6 @@
   })
 }
 
-
-
 /* ---------------- 生命周期 ---------------- */
 
 onPullDownRefresh(() => {
@@ -176,10 +172,10 @@
 </script>
 
 <template>
-	<view class="bg-page min-h-screen w-screen flex flex-col">
+  <view class="min-h-screen w-screen flex flex-col bg-page">
-		<!-- 骨架屏 -->
+    <!-- 加载/错误占位(列表为空时展示,避免覆盖下拉刷新的旧内容) -->
-		<view v-if="loading !== 'success' && articleList.length === 0" class="loading-wrap px-3">
+    <view v-if="loading !== 'success' && articleList.length === 0">
-			<wd-skeleton :row="3" :animated="true" />
+      <uh-data-loading :loading-status="loading" @refresh="handleQuery" />
     </view>
 
     <block v-else>
@@ -196,11 +192,13 @@
       <uh-home-category />
 
       <!-- 最新文章 -->
-			<uh-section-title class="mb-4 px-3 box-border">
+      <uh-section-title class="mb-4 box-border px-3">
         最新内容
         <template #right>
-					<view class="uh-global-card-glass flex items-center justify-center rounded-md p-1 text-gray-400"
+          <view
-						@click="handleToSearch()">
+            class="uh-global-card-glass flex items-center justify-center rounded-md p-1 text-gray-400"
+            @click="handleToSearch()"
+          >
             <wd-icon name="arrow-right" size="12px" />
           </view>
         </template>
@@ -210,9 +208,11 @@
         <wd-empty description="博主还没有发表任何内容~" />
       </view>
       <block v-else>
-				<view class="p-3 pt-0 flex flex-col gap-y-3" :class="globalAppSettings.layout.home">
+        <view class="flex flex-col gap-y-3 p-3 pt-0" :class="globalAppSettings.layout.home">
-					<uh-article-card v-for="(article, index) in articleList" :key="index" from="home" :article="article"
+          <uh-article-card
-						@on-click="handleToArticleDetail" />
+            v-for="(article, index) in articleList" :key="index" from="home" :article="article"
+            @on-click="handleToArticleDetail"
+          />
         </view>
         <view class="load-text mt-3 pb-5 text-center text-xs text-gray-400">
           {{ loadMoreText }}

src/pages/tabbar/moments/moments.vue

@@ -278,14 +278,9 @@
 		<uh-plugin-unavailable v-if="!uniHaloPluginAvailable" :plugin-id="uniHaloPluginId"
 			error-text="检测到当前插件没有安装或者启用，无法使用瞬间功能哦，请联系管理员" @on-refresh="handleGetData" />
 		<template v-else>
-			<!-- 加载中 -->
-			<view v-if="loading === 'loading'" class="loading-wrap p-3">
-				<wd-skeleton :row="3" :animated="true" />
-			</view>
-
 			<!-- 加载失败(可重试) -->
-			<uh-data-loading v-else-if="loading === 'error'" :loading-status="loading" min-height="60vh"
+			<uh-data-loading v-if="loading !== 'success'" :loading-status="loading" min-height="60vh"
-				error-text="瞬间加载失败，请点击重试" @refresh="handleGetData" />
+				@refresh="handleGetData" />
 
 			<view v-else class="flex flex-col gap-3 px-4">
 				<view v-if="dataList.length === 0"

src/utils/common.ts

@@ -0,0 +1,3 @@
+export function sleep(ms: number): Promise<void> {
+  return new Promise(resolve => setTimeout(resolve, ms));
+}