refactor: 重构文章列表组件与页面逻辑，统一使用uh-article-card

1.  抽离并重构uh-article-card组件，支持多种布局模式与配置化参数
2.  归档页、文章列表页、首页统一使用uh-article-card替代原生实现
3.  移除冗余工具函数与状态管理，优化页面代码结构
4.  调整文章列表空状态提示文本与布局高度

src/components/uh-article-card/uh-article-card.vue

@@ -5,12 +5,77 @@ import { useSettingStore } from '@/store/setting'
 	import { formatTime } from '@/utils/formatTime'
 	import type { ICategory, IPost } from '@/api/types/halo'
 
+	type CardLayout = 'image_top' | 'image_right' | 'image_bottom' | 'image_left'
+
+	interface CardLayoutClasses {
+		container: string
+		cover: string
+		contentWrapper: string
+		footer: string
+		authorGroup: string
+		time: string
+		tagCategory: string
+		visits: string
+	}
+
+	/** 旧版全局 cardType → 新版 layout;未知值(如 only_text)由 effectiveLayout 兜底 image_top */
+	const CARD_TYPE_TO_LAYOUT: Record<string, CardLayout> = {
+		lr_image_text: 'image_left',
+		lr_text_image: 'image_right',
+		tb_image_text: 'image_top',
+		tb_text_image: 'image_bottom',
+	}
+
+	/** 单一事实源:每种布局的完整形态,模板不再有任何 order / 条件分支 */
+	const CARD_LAYOUTS: Record<CardLayout, CardLayoutClasses> = {
+		image_top: {
+			container: 'flex flex-col gap-y-2',
+			cover: '',
+			contentWrapper: 'w-full',
+			footer: 'flex items-center',
+			authorGroup: 'flex-1 items-center justify-start gap-x-1',
+			time: 'flex-1 text-center',
+			tagCategory: '',
+			visits: 'flex-1 justify-end',
+		},
+		image_bottom: {
+			container: 'flex flex-col gap-y-2',
+			cover: 'order-2',
+			contentWrapper: 'w-full',
+			footer: 'flex items-center',
+			authorGroup: 'flex-1 items-center justify-center gap-x-1',
+			time: 'flex-1 text-center',
+			tagCategory: '',
+			visits: 'flex-1 justify-center',
+		},
+		image_left: {
+			container: 'flex gap-x-3 !p-2',
+			cover: 'shrink-0 !w-36 !h-24',
+			contentWrapper: 'w-0 flex-1 justify-between',
+			footer: 'flex items-center justify-between',
+			authorGroup: 'items-center gap-x-1',
+			time: '!hidden',
+			tagCategory: '!hidden',
+			visits: '',
+		},
+		image_right: {
+			container: 'flex gap-x-3 !p-2',
+			cover: 'order-2 shrink-0 !w-36 !h-24',
+			contentWrapper: 'order-1 w-0 flex-1 justify-between',
+			footer: 'flex items-center justify-between',
+			authorGroup: 'items-center gap-x-1',
+			time: '!hidden',
+			tagCategory: '!hidden',
+			visits: '',
+		},
+	}
+
 	const props = withDefaults(defineProps<{
-  from?: string
+		from ?: 'home' | 'articles' | 'archives' | ''
 		auditMode ?: boolean
 		article : IPost
-  /** 卡片形态:list=常规列表卡(默认),grid=两列紧凑卡(隐藏分类/标签,摘要单行) */
 		variant ?: 'list' | 'grid'
+		layout ?: CardLayout
 	}>(), {
 		auditMode: false,
 		from: '',
@@ -19,34 +84,39 @@ const props = withDefaults(defineProps<{
 
 	const settingStore = useSettingStore()
 
-/** 卡片布局 class(由全局设置 layout 决定) */
-const cardType = computed(() => {
-  const layout = settingStore.settings.layout
-  // 首页双列时强制上图下文布局,除非显式指定其他
-  if (props.from === 'home' && layout.home === 'h_row_col2') {
-    if (!['tb_image_text', 'tb_text_image', 'only_text'].includes(layout.cardType)) {
-      return [props.from, layout.home, 'tb_image_text']
-    }
-    return [props.from, layout.home, layout.cardType]
-  }
-  return [layout.home, layout.cardType]
-})
-
-/** grid 紧凑模式(两列:隐藏分类/标签,摘要单行,底部精简) */
 	const isGrid = computed(() => props.variant === 'grid')
 
-/** 发布时间格式化 yyyy-MM-dd */
+	/** 实际生效布局:显式 layout > home/archives 跟随全局 cardType > image_top;窄列场景左右布局回退上图下文 */
-const publishTimeText = computed(() => {
+	const effectiveLayout = computed<CardLayout>(() => {
-  const time = props.article.spec.publishTime
+		const followGlobal = props.from === 'home' || props.from === 'archives'
-  return time ? formatTime({ d: time, f: 'yyyy-MM-dd' }) : ''
+		let raw = props.layout
+		if (!raw) {
+			raw = followGlobal
+				? CARD_TYPE_TO_LAYOUT[settingStore.settings.layout.cardType] ?? 'image_top'
+				: 'image_top'
+		}
+		const narrow = isGrid.value || (props.from === 'home' && settingStore.settings.layout.home === 'h_row_col2')
+		if (narrow && (raw === 'image_left' || raw === 'image_right')) {
+			return 'image_top'
+		}
+		return raw
+	})
+
+	const cardLayout = computed(() => CARD_LAYOUTS[effectiveLayout.value])
+
+	const publishTimeText = computed(() => {
+		const time = props.article.spec.publishTime
+		return time ? formatTime({ d: time, f: 'yyyy/MM/dd' }) : ''
 	})
 
-/** 阅读数(兼容 status.stats.visits 与旧版顶层 stats.visit) */
 	const visitCount = computed(() => {
 		return props.article.status?.stats?.visits ?? props.article.stats?.visit ?? 0
 	})
 
 	function handleToArticleDetail() {
+		if (props.auditMode) {
+			return
+		}
 		uni.navigateTo({
 			url: `/pages-blog/article-detail/article-detail?name=${props.article.metadata.name}`,
 			animationType: 'slide-in-right',
@@ -64,57 +134,43 @@ function handleToCategory(category: ICategory) {
 </script>
 
 <template>
-  <view
+	<view class="uh-global-card-glass uh-shadow-xs relative overflow-hidden rounded-xl p-3"
-    class="uh-global-card-glass uh-shadow-xs relative overflow-hidden rounded-xl p-3"
+		:class="cardLayout.container" @click.stop="handleToArticleDetail()">
-    @click.stop="handleToArticleDetail()"
+		<text v-if="article.spec.pinned"
-  >
+			class="text-gray-60 absolute left-2 top-2 z-1 rounded-lg bg-secondary px-2 py-1 text-xs">
-    <text
-      v-if="article.spec.pinned"
-      class="text-gray-60 absolute right-6 top-6 z-1 rounded-lg bg-secondary px-2 py-1 text-xs"
-    >
 			置顶
 		</text>
-    <image
+		<image :class="[isGrid ? 'w-full h-24 rounded-lg' : 'w-full h-36 rounded-lg', cardLayout.cover]"
-      :class="isGrid ? 'w-full h-24 rounded-lg' : 'w-full h-36 rounded-lg'"
+			:src="checkThumbnailUrl(article.spec.cover)" mode="aspectFill" lazy-load />
-      :src="checkThumbnailUrl(article.spec.cover)" mode="aspectFill" lazy-load
+		<view class="flex flex-col gap-y-2 text-sm" :class="cardLayout.contentWrapper">
-    />
+			<view class="truncate font-bold">
-    <view class="w-full flex flex-col gap-y-2 text-sm">
-      <view class="mt-2 truncate font-bold">
 				{{ article.spec.title }}
 			</view>
 			<view :class="isGrid ? 'content line-clamp-1 text-gray-600' : 'content line-clamp-2 text-gray-600'">
 				{{ article.status?.excerpt }}
 			</view>
-      <view v-if="!isGrid" class="my-1 box-border flex flex-wrap gap-2">
+			<view v-if="!isGrid" class="my-1 box-border flex flex-wrap gap-2" :class="cardLayout.tagCategory">
 				<template v-if="article.categories && article.categories.length !== 0">
-          <text
+					<text v-for="cate in article.categories" :key="cate.metadata.name"
-            v-for="cate in article.categories" :key="cate.metadata.name"
+						class="rounded-xl bg-secondary px-2 py-1 text-xs" @click.stop="handleToCategory(cate)">
-            class="rounded-xl bg-secondary px-2 py-1 text-xs" @click.stop="handleToCategory(cate)"
-          >
 						{{ cate.spec.displayName }}
 					</text>
 				</template>
 				<template v-if="article.tags && article.tags.length !== 0">
-          <text
+					<text v-for="tag in article.tags" :key="tag.metadata.name"
-            v-for="tag in article.tags" :key="tag.metadata.name"
+						class="rounded-xl bg-secondary px-2 py-1 text-xs">
-            class="rounded-xl bg-secondary px-2 py-1 text-xs"
-          >
 						# {{ tag.spec.displayName }}
 					</text>
 				</template>
 			</view>
-      <view class="mt-1 flex items-center justify-between text-xs text-gray-500">
+			<view class="flex items-center text-xs text-gray-500" :class="cardLayout.footer">
-        <view v-if="!isGrid" class="flex items-center gap-x-1">
+				<view v-if="!isGrid" class="flex items-center" :class="cardLayout.authorGroup">
-          <image
+					<image :src="article.owner.avatar" class="uh-global-card-glass h-5 w-5 rounded-full"
-            :src="article.owner.avatar" class="uh-global-card-glass h-5 w-5 rounded-full"
+						mode="aspectFill" />
-            mode="aspectFill"
+					<text class="truncate">{{ article.owner.displayName }}</text>
-          />
-          <text>{{ article.owner.displayName }}</text>
 				</view>
-        <view class="flex items-center gap-x-2">
+				<text v-if="!isGrid" class="text-gray-400" :class="cardLayout.time">{{ publishTimeText }}</text>
-          {{ publishTimeText }}
+				<view class="visits flex items-center gap-x-1" :class="cardLayout.visits">
-        </view>
-        <view class="visits">
 					浏览
 					<text class="number">{{ visitCount }}</text>
 					次

src/pages-blog/archives/archives.vue

@@ -3,11 +3,8 @@ import { computed, ref } from 'vue'
 import { onPullDownRefresh, onReachBottom } from '@dcloudio/uni-app'
 import { getPostList } from '@/api/halo'
 import { useAppConfigStore } from '@/store/appConfig'
-import { useSettingStore } from '@/store/setting'
 import { DataLoadingStatusEnum, useDataLoadingStatus } from '@/hooks/useDataLoadingStatus'
-import { checkThumbnailUrl } from '@/utils/url'
 import { sleep } from '@/utils/common'
-import { formatTime as formatTimeUtil } from '@/utils/formatTime'
 import type { IPost } from '@/api/types/halo'
 
 definePage({
@@ -19,10 +16,8 @@ definePage({
 })
 
 const appConfigStore = useAppConfigStore()
-const settingStore = useSettingStore()
 
 const calcAuditModeEnabled = computed(() => appConfigStore.auditModeEnabled)
-const globalAppSettings = computed(() => settingStore.settings)
 
 /* ---------------- 状态 ---------------- */
 const { loadingStatus, updateLoadingStatus } = useDataLoadingStatus()
@@ -43,17 +38,6 @@ const loadMoreText = ref('加载中...')
 const postLabelYearKey = 'content.halo.run/archive-year'
 const postLabelMonthKey = 'content.halo.run/archive-month'
 
-/** 卡片布局偏好 → 原子类(对应旧版 cardType 样式变体) */
-const CARD_LAYOUTS: Record<string, { card: string, thumb: string, info: string }> = {
-  lr_image_text: { card: '', thumb: 'h-[170rpx] w-[200rpx]', info: 'w-0 flex-1 pl-5' },
-  lr_text_image: { card: '', thumb: 'order-2 h-[170rpx] w-[200rpx]', info: 'order-1 w-0 flex-1 pr-5' },
-  tb_image_text: { card: 'flex-col', thumb: 'h-[220rpx] w-full', info: 'w-full pt-3' },
-  tb_text_image: { card: 'flex-col', thumb: 'order-2 h-[220rpx] w-full', info: 'order-1 w-full pb-3' },
-  only_text: { card: '', thumb: 'hidden', info: 'py-1' },
-}
-
-const calcCardLayout = computed(() => CARD_LAYOUTS[globalAppSettings.value.layout.cardType] || CARD_LAYOUTS.lr_image_text)
-
 /* ---------------- 数据处理 ---------------- */
 /** 按 tab 分组文章 */
 function handleGetPosts(list: IPost[]): Record<string, IPost[]> {
@@ -124,7 +108,6 @@ async function handleGetData() {
       const posts = handleGetPosts(filtered)
       dataList.value = handleGetShowDataList(posts)
       cacheDataList.value = filtered
-	 c
       updateLoadingStatus(
         dataList.value.length === 0 ? DataLoadingStatusEnum.Empty : DataLoadingStatusEnum.Success,
       )
@@ -207,15 +190,6 @@ function handleOnTabChange(e: { index: number }) {
   uni.pageScrollTo({ scrollTop: 0, duration: 500 })
 }
 
-function handleToArticleDetail(article: IPost) {
-  if (calcAuditModeEnabled.value)
-    return
-  uni.navigateTo({
-    url: `/pages-blog/article-detail/article-detail?name=${article.metadata.name}`,
-    animationType: 'slide-in-right',
-  })
-}
-
 function handleToTopPage(duration = 500) {
   uni.pageScrollTo({
     scrollTop: 0,
@@ -226,11 +200,6 @@ function handleToTopPage(duration = 500) {
   })
 }
 
-function formatTime(time?: string): string {
-  // 与旧项目一致:yyyy年MM月dd日 星期w
-  return time ? formatTimeUtil({ d: time, f: 'yyyy年MM月dd日 星期w' }) : ''
-}
-
 /* ---------------- 生命周期 ---------------- */
 handleGetData()
 
@@ -301,27 +270,14 @@ onReachBottom(() => {
               <text class="rounded-full bg-secondary px-2 py-1 text-xs text-gray-500 leading-none">共 {{ item.posts.length }} 篇{{ calcAuditModeEnabled ? '内容' : '文章' }}</text>
             </view>
 
-            <view v-if="item.posts.length !== 0">
+            <view v-if="item.posts.length !== 0" class="flex flex-col gap-y-4">
-              <view
+              <uh-article-card
                 v-for="post in item.posts"
                 :key="post.metadata.name"
-                class="uh-global-card-glass mb-4 flex rounded-2xl p-4"
+                from="archives"
-                :class="calcCardLayout.card"
+                :article="post"
-                @click="handleToArticleDetail(post)"
+                :audit-mode="calcAuditModeEnabled"
-              >
+              />
-                <image class="post-thumbnail shrink-0 rounded-lg" :class="calcCardLayout.thumb" :src="checkThumbnailUrl(post.spec.cover)" mode="aspectFill" lazy-load />
-                <view class="post-info min-w-0" :class="calcCardLayout.info">
-                  <view class="post-info-title overflow-hidden text-ellipsis whitespace-nowrap text-[28rpx] text-gray-900 font-bold">
-                    {{ post.spec.title }}
-                  </view>
-                  <view class="post-info-summary line-clamp-2 mt-2 text-[24rpx] text-gray-400">
-                    {{ post.status?.excerpt }}
-                  </view>
-                  <view class="post-info-time mt-2 text-[24rpx] text-gray-400">
-                    日期：{{ formatTime(post.spec.publishTime) }}
-                  </view>
-                </view>
-              </view>
             </view>
             <view v-else class="post-empty py-6 text-[26rpx] text-gray-400">
               该日期下暂无归档文章！

src/pages-blog/articles/articles.vue

@@ -1,9 +1,4 @@
 <script lang="ts" setup>
-/**
- * 文章列表页(替代 unibest 模板占位页)
- * 标准布局:uh-navbar + useDataLoadingStatus 四态 + uh-data-loading + 分页加载 + 回顶
- * 2026-09-08:新增分类筛选 + 排序(参考投票中心胶囊弹层),列表改 grid 两列紧凑卡片
- */
 import { computed, ref } from 'vue'
 import { onLoad, onPullDownRefresh, onReachBottom } from '@dcloudio/uni-app'
 import { getCategoryList, getPostList } from '@/api/halo'
@@ -11,6 +6,7 @@ import { useAppConfigStore } from '@/store/appConfig'
 import { checkAvatarUrl } from '@/utils/url'
 import { t } from '@/locale'
 import { DataLoadingStatusEnum, useDataLoadingStatus } from '@/hooks/useDataLoadingStatus'
+import { sleep } from '@/utils/common'
 import type { ICategory, IPost } from '@/api/types/halo'
 
 definePage({
@@ -32,16 +28,13 @@ const hasNext = ref(false)
 const isLoadMore = ref(false)
 const loadMoreText = ref(t('common.loading'))
 
-/* ---------------- 筛选与排序(内联:分类参考图库顶部,排序一排) ---------------- */
 interface IFilterOption {
   label: string
   value: string
 }
 
-/** 分类列表(筛选选项数据源) */
 const categoryList = ref<ICategory[]>([])
 
-/** 排序参数映射 */
 const sortMap: Record<string, string[]> = {
   default: ['spec.pinned,desc', 'spec.publishTime,desc'],
   latest: ['spec.publishTime,desc'],
@@ -49,13 +42,11 @@ const sortMap: Record<string, string[]> = {
   pinned: ['spec.pinned,desc'],
 }
 
-/** 分类选项(含"全部",参考图库顶部设计) */
 const categoryOptions = computed<IFilterOption[]>(() => [
   { label: '全部', value: '' },
   ...categoryList.value.map(c => ({ label: c.spec.displayName, value: c.metadata.name })),
 ])
 
-/** 排序选项(一排内联) */
 const sortOptions: IFilterOption[] = [
   { label: '默认排序', value: 'default' },
   { label: '最新', value: 'latest' },
@@ -63,7 +54,6 @@ const sortOptions: IFilterOption[] = [
   { label: '置顶', value: 'pinned' },
 ]
 
-/** 各维度当前选中值(空串 = 全部) */
 const filterValues = ref<Record<string, string>>({ category: '', sort: 'default' })
 
 /** 切换分类/排序:重置分页并重新查询 */
@@ -91,7 +81,6 @@ async function handleGetCategoryList() {
 /* ---------------- 数据加载 ---------------- */
 async function handleGetArticleList() {
   if (calcAuditModeEnabled.value) {
-    // 审核模式:真实文章按 audit-data posts 过滤(数组顺序即展示顺序)
     const auditPostNames = appConfigStore.auditData.spec?.posts || []
     try {
       const res = await getPostList({ page: 1, size: 0, sort: ['spec.publishTime,desc'] })
@@ -100,6 +89,7 @@ async function handleGetArticleList() {
         item.owner.avatar = checkAvatarUrl(item.owner.avatar)
         return item
       })
+	  await sleep(600)
       updateLoadingStatus(articleList.value.length === 0 ? DataLoadingStatusEnum.Empty : DataLoadingStatusEnum.Success)
       loadMoreText.value = t('common.noMore')
     }
@@ -120,7 +110,6 @@ async function handleGetArticleList() {
   loadMoreText.value = t('common.loading')
 
   try {
-    // 应用分类筛选与排序参数
     const params = {
       ...queryParams.value,
       category: filterValues.value.category || undefined,
@@ -134,6 +123,7 @@ async function handleGetArticleList() {
       item.owner.avatar = checkAvatarUrl(item.owner.avatar)
       return item
     })
+	await sleep(600)
     updateLoadingStatus(articleList.value.length === 0 ? DataLoadingStatusEnum.Empty : DataLoadingStatusEnum.Success)
     loadMoreText.value = res.data.hasNext ? t('common.loadMore') : t('common.noMore')
   }
@@ -147,17 +137,6 @@ async function handleGetArticleList() {
   }
 } 
 
-function handleToTopPage(duration = 500) {
-  uni.pageScrollTo({
-    scrollTop: 0,
-    duration,
-    fail: (err) => {
-      console.error('回顶失败', err)
-    },
-  })
-}
-
-/* ---------------- 生命周期 ---------------- */
 onLoad(() => {
   handleGetCategoryList()
   handleGetArticleList()
@@ -191,13 +170,11 @@ onReachBottom(() => {
 </script>
 
 <template>
-  <view class="app-page min-h-screen w-screen flex flex-col bg-page">
+  <view class="min-h-screen w-screen flex flex-col bg-page">
-    <!-- 自定义导航 -->
     <uh-navbar default-title="文章列表" title-color="text-gray-900" />
 
-    <!-- 第一行:分类 Tab(参考图库顶部设计) -->
     <wd-sticky v-if="categoryOptions.length > 1" class="w-full">
-      <scroll-view :scroll-x="true" class="w-full whitespace-nowrap pt-2">
+      <scroll-view :scroll-x="true" :show-scrollbar="false" class="w-full whitespace-nowrap pt-2">
         <view
           v-for="cate in categoryOptions" :key="cate.value"
           class="uh-global-card-glass uh-shadow-xs mb-1 ml-3 inline-flex border rounded-2xl px-4 py-1 text-sm"
@@ -209,8 +186,7 @@ onReachBottom(() => {
       </scroll-view>
     </wd-sticky>
 
-    <!-- 第二行:排序一排 -->
+    <scroll-view :scroll-x="true" :show-scrollbar="false" class="w-full whitespace-nowrap">
-    <scroll-view :scroll-x="true" class="w-full whitespace-nowrap">
       <view class="box-border flex gap-2 px-3 py-2">
         <view
           v-for="opt in sortOptions" :key="opt.value"
@@ -223,16 +199,14 @@ onReachBottom(() => {
       </view>
     </scroll-view>
 
-    <!-- 加载/错误/空占位(状态机) -->
     <uh-data-loading
       v-if="loadingStatus !== DataLoadingStatusEnum.Success"
       :loading-status="loadingStatus"
-      empty-text="博主还没有发布文章呢~"
+      empty-text="啊偶，还没有任何内容哦~"
-      min-height="60vh"
+      min-height="75vh"
       @refresh="handleGetArticleList"
     />
 
-    <!-- 文章列表(grid 两列) -->
     <view v-else class="box-border flex flex-col gap-4 p-3">
       <view class="grid grid-cols-2 gap-3">
         <uh-article-card

src/pages/tabbar/home/home.vue

@@ -155,7 +155,6 @@ async function handleGetArticleList() {
 
 	/* ---------------- 跳转 ---------------- */
 
-/** 更多文章:跳转文章列表页 */
 	function handleToArticles() {
 		uni.navigateTo({ url: '/pages-blog/articles/articles' })
 	}
@@ -164,16 +163,6 @@ function handleOnLogoToPage() {
 		uni.switchTab({ url: '/pages/tabbar/about/about' })
 	}
 
-function handleToTopPage(duration = 500) {
-  uni.pageScrollTo({
-    scrollTop: 0,
-    duration,
-    fail: (err) => {
-      console.error('回顶失败', err)
-    },
-  })
-}
-
 	function init() {
 		if (!intercepted.value) {
 			handleQuery()
@@ -231,39 +220,32 @@ onReachBottom(() => {
 			<template #right>
 				<view class="flex items-center gap-2">
 					<!-- 推荐模式分段器:默认 / 置顶 / 最新 -->
-          <view class="uh-global-card-glass uh-shadow-xs flex scale-95 items-center gap-1 border rounded-lg p-0.5">
+					<view class="uh-global-card-glass uh-shadow-xs flex items-center border rounded-lg p-0.5">
-            <view
+						<view v-for="tab in recommendTabs" :key="tab.value" class="rounded-md px-2 py-0.5 text-xs"
-              v-for="tab in recommendTabs" :key="tab.value"
-              class="rounded-md px-2 py-0.5 text-xs"
 							:class="recommendMode === tab.value ? 'bg-secondary text-gray-900' : 'text-gray-500'"
-              @click="handleRecommendModeChange(tab.value as 'default' | 'pinned' | 'latest' | 'oldest')"
+							@click="handleRecommendModeChange(tab.value as 'default' | 'pinned' | 'latest' | 'oldest')">
-            >
 							{{ tab.label }}
 						</view>
+						<view class="rounded-md px-2 py-0.5 text-xs text-gray-500" @click="handleToArticles()">
+							更多
 						</view>
-          <!-- 更多(查看全部文章) -->
+					</view>
-          <view
+					<view v-if="false"
 						class="uh-global-card-glass flex items-center justify-center gap-x-1 rounded-md p-1 text-gray-400"
-            @click="handleToArticles()"
+						@click="handleToArticles()">
-          >
 						<wd-icon name="arrow-right" size="24rpx" />
 					</view>
 				</view>
 			</template>
 		</uh-section-title>
 
-    <!-- 加载/错误占位 -->
+		<uh-data-loading v-if="loadingStatus !== DataLoadingStatusEnum.Success" :loading-status="loadingStatus"
-    <uh-data-loading
+			min-height="36vh" @refresh="handleQuery" />
-      v-if="loadingStatus !== DataLoadingStatusEnum.Success" :loading-status="loadingStatus"
-      min-height="36vh" @refresh="handleQuery"
-    />
 
 		<block v-else>
 			<view class="box-border flex flex-col gap-y-3 p-3 pt-0" :class="globalAppSettings.layout.home">
-        <uh-article-card
+				<uh-article-card v-for="(article, index) in articleList" :key="index" from="home" :article="article"
-          v-for="(article, index) in articleList" :key="index"
+					:audit-mode="calcAuditModeEnabled" layout="image_bottom"/>
-          from="home" :article="article" :audit-mode="calcAuditModeEnabled"
-        />
 			</view>
 			<view class="mt-3 box-border pb-5 text-center text-xs text-gray-400">
 				{{ loadMoreText }}