From b4239da1afb8f521b843a569145b5fa91afbcd97 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=B0=8F=E8=8E=AB=E5=94=90=E5=B0=BC?=
 <tzxiaomo@outlook.com>
Date: Wed, 9 Sep 2026 03:06:17 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E9=87=8D=E6=9E=84=E6=96=87=E7=AB=A0?=
 =?UTF-8?q?=E5=8D=A1=E7=89=87=E4=B8=8E=E5=88=97=E8=A1=A8=E9=A1=B5=EF=BC=8C?=
 =?UTF-8?q?=E6=96=B0=E5=A2=9E=E5=A4=9A=E5=B8=83=E5=B1=80=E4=B8=8E=E7=AD=9B?=
 =?UTF-8?q?=E9=80=89=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

1. 新增文章卡片grid紧凑布局，支持隐藏分类标签与单行摘要
2. 重构文章列表页，添加分类筛选、排序功能与两列卡片布局
3. 首页新增推荐模式切换，支持默认/置顶/最新/最旧排序
4. 统一代码缩进与格式规范，完善类型定义与注释
---
 .../uh-article-card/uh-article-card.vue       | 210 +++++----
 src/pages-blog/articles/articles.vue          | 316 +++++++++++--
 src/pages/tabbar/home/home.vue                | 432 ++++++++++--------
 3 files changed, 646 insertions(+), 312 deletions(-)

diff --git a/src/components/uh-article-card/uh-article-card.vue b/src/components/uh-article-card/uh-article-card.vue
index 243e0e2..1cfcf1a 100644
--- a/src/components/uh-article-card/uh-article-card.vue
+++ b/src/components/uh-article-card/uh-article-card.vue
@@ -1,105 +1,125 @@
 <script lang="ts" setup>
-	import { computed } from 'vue'
-	import { checkThumbnailUrl } from '@/utils/url'
-	import { useSettingStore } from '@/store/setting'
-	import { formatTime } from '@/utils/formatTime'
-	import type { IPost,ICategory } from '@/api/types/halo'
+import { computed } from 'vue'
+import { checkThumbnailUrl } from '@/utils/url'
+import { useSettingStore } from '@/store/setting'
+import { formatTime } from '@/utils/formatTime'
+import type { ICategory, IPost } from '@/api/types/halo'
 
-	const props = withDefaults(defineProps<{
-		from ?: string
-		auditMode?: boolean
-		article : IPost
-	}>(), {
-		auditMode: false,
-		from: '',
-	})
+const props = withDefaults(defineProps<{
+  from?: string
+  auditMode?: boolean
+  article: IPost
+  /** 卡片形态:list=常规列表卡(默认),grid=两列紧凑卡(隐藏分类/标签,摘要单行) */
+  variant?: 'list' | 'grid'
+}>(), {
+  auditMode: false,
+  from: '',
+  variant: 'list',
+})
 
-	const settingStore = useSettingStore()
+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]
-	})
+/** 卡片布局 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]
+})
 
-	/** 发布时间格式化 yyyy-MM-dd */
-	const publishTimeText = computed(() => {
-		const time = props.article.spec.publishTime
-		return time ? formatTime({ d: time, f: 'yyyy-MM-dd' }) : ''
-	})
+/** grid 紧凑模式(两列:隐藏分类/标签,摘要单行,底部精简) */
+const isGrid = computed(() => props.variant === 'grid')
 
-	/** 阅读数(兼容 status.stats.visits 与旧版顶层 stats.visit) */
-	const visitCount = computed(() => {
-		return props.article.status?.stats?.visits ?? props.article.stats?.visit ?? 0
-	})
+/** 发布时间格式化 yyyy-MM-dd */
+const publishTimeText = computed(() => {
+  const time = props.article.spec.publishTime
+  return time ? formatTime({ d: time, f: 'yyyy-MM-dd' }) : ''
+})
 
-	function handleToArticleDetail() {
-		uni.navigateTo({
-			url: `/pages-blog/article-detail/article-detail?name=${props.article.metadata.name}`,
-			animationType: 'slide-in-right',
-		})
-	}
-	
-	function handleToCategory(category : ICategory) {
-		if (props.auditMode) {
-			return
-		}
-		uni.navigateTo({
-			url: `/pages-blog/category-articles/category-articles?name=${category.metadata.name}&title=${category.spec.displayName}`,
-		})
-	}
+/** 阅读数(兼容 status.stats.visits 与旧版顶层 stats.visit) */
+const visitCount = computed(() => {
+  return props.article.status?.stats?.visits ?? props.article.stats?.visit ?? 0
+})
+
+function handleToArticleDetail() {
+  uni.navigateTo({
+    url: `/pages-blog/article-detail/article-detail?name=${props.article.metadata.name}`,
+    animationType: 'slide-in-right',
+  })
+}
+
+function handleToCategory(category: ICategory) {
+  if (props.auditMode) {
+    return
+  }
+  uni.navigateTo({
+    url: `/pages-blog/category-articles/category-articles?name=${category.metadata.name}&title=${category.spec.displayName}`,
+  })
+}
 </script>
 
 <template>
-	<view class="uh-global-card-glass uh-shadow-xs overflow-hidden relative rounded-xl p-3"
-		@click.stop="handleToArticleDetail()">
-		<text v-if="article.spec.pinned"
-			class="absolute right-6 top-6 z-1 bg-secondary text-gray-60 text-xs px-2 py-1 rounded-lg"> 置顶 </text>
-		<image class="w-full h-36 rounded-lg" :src="checkThumbnailUrl(article.spec.cover)" mode="aspectFill"
-			lazy-load />
-		<view class="flex flex-col w-full gap-y-2 text-sm">
-			<view class="mt-2 font-bold truncate">
-				{{ article.spec.title }}
-			</view>
-			<view class="content line-clamp-2 text-gray-600">
-				{{ article.status?.excerpt }}
-			</view>
-			<view class="my-1 box-border flex flex-wrap gap-2">
-				<template v-if="article.categories && article.categories.length !== 0">
-					<text v-for="cate in article.categories" :key="cate.metadata.name"
-						class="py-1 px-2 text-xs rounded-xl bg-secondary" @click.stop="handleToCategory(cate)">
-						{{ cate.spec.displayName }}
-					</text>
-				</template>
-				<template v-if="article.tags && article.tags.length !== 0">
-					<text v-for="tag in article.tags" :key="tag.metadata.name"
-						class="py-1 px-2 text-xs rounded-xl bg-secondary">
-						# {{ tag.spec.displayName }}
-					</text>
-				</template>
-			</view>
-			<view class="flex items-center justify-between text-xs text-gray-500">
-				<view class="flex items-center gap-x-1">
-					<image :src="article.owner.avatar" class="uh-global-card-glass rounded-full w-5 h-5"
-						mode="aspectFill"></image>
-					<text>{{article.owner.displayName}}</text>
-				</view>
-				<view class="flex items-center gap-x-2">
-					{{ publishTimeText }}
-				</view>
-				<view class="visits">
-					浏览
-					<text class="number">{{ visitCount }}</text>
-					次
-				</view>
-			</view>
-		</view>
-	</view>
-</template>
\ No newline at end of file
+  <view
+    class="uh-global-card-glass uh-shadow-xs relative overflow-hidden rounded-xl p-3"
+    @click.stop="handleToArticleDetail()"
+  >
+    <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
+      :class="isGrid ? 'w-full h-24 rounded-lg' : 'w-full h-36 rounded-lg'"
+      :src="checkThumbnailUrl(article.spec.cover)" mode="aspectFill" lazy-load
+    />
+    <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">
+        <template v-if="article.categories && article.categories.length !== 0">
+          <text
+            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)"
+          >
+            {{ cate.spec.displayName }}
+          </text>
+        </template>
+        <template v-if="article.tags && article.tags.length !== 0">
+          <text
+            v-for="tag in article.tags" :key="tag.metadata.name"
+            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 v-if="!isGrid" class="flex items-center gap-x-1">
+          <image
+            :src="article.owner.avatar" class="uh-global-card-glass h-5 w-5 rounded-full"
+            mode="aspectFill"
+          />
+          <text>{{ article.owner.displayName }}</text>
+        </view>
+        <view class="flex items-center gap-x-2">
+          {{ publishTimeText }}
+        </view>
+        <view class="visits">
+          浏览
+          <text class="number">{{ visitCount }}</text>
+          次
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
diff --git a/src/pages-blog/articles/articles.vue b/src/pages-blog/articles/articles.vue
index 7c4b911..a2bbce7 100644
--- a/src/pages-blog/articles/articles.vue
+++ b/src/pages-blog/articles/articles.vue
@@ -1,33 +1,297 @@
-<script setup lang="ts">
-	import { DataLoadingStatusEnum, useDataLoadingStatus } from '@/hooks/useDataLoadingStatus'
+<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'
+import { useAppConfigStore } from '@/store/appConfig'
+import { checkAvatarUrl } from '@/utils/url'
+import { t } from '@/locale'
+import { DataLoadingStatusEnum, useDataLoadingStatus } from '@/hooks/useDataLoadingStatus'
+import type { ICategory, IPost } from '@/api/types/halo'
 
-	definePage({
-		style: {
-			navigationBarTitleText: '文章列表',
-			navigationStyle: 'custom',
-		},
-	})
-	const { loadingStatus, updateLoadingStatus } = useDataLoadingStatus()
+definePage({
+  style: {
+    navigationBarTitleText: '文章列表',
+    navigationStyle: 'custom',
+    enablePullDownRefresh: true,
+  },
+})
 
-	setTimeout(() => {
-		updateLoadingStatus(DataLoadingStatusEnum.Success)
-	}, 3000)
+const appConfigStore = useAppConfigStore()
+const calcAuditModeEnabled = computed(() => appConfigStore.auditModeEnabled)
+
+/* ---------------- 状态 ---------------- */
+const { loadingStatus, updateLoadingStatus } = useDataLoadingStatus()
+const articleList = ref<IPost[]>([])
+const queryParams = ref({ size: 10, page: 1 })
+const hasNext = ref(false)
+const isLoadMore = ref(false)
+const loadMoreText = ref(t('common.loading'))
+
+/* ---------------- 筛选与排序(参考投票中心) ---------------- */
+interface IFilterOption {
+  label: string
+  value: string
+}
+
+interface IFilterItem {
+  key: 'category' | 'sort'
+  label: string
+  options: IFilterOption[]
+}
+
+/** 分类列表(筛选选项数据源) */
+const categoryList = ref<ICategory[]>([])
+
+/** 排序参数映射 */
+const sortMap: Record<string, string[]> = {
+  default: ['spec.pinned,desc', 'spec.publishTime,desc'],
+  latest: ['spec.publishTime,desc'],
+  oldest: ['spec.publishTime,asc'],
+  pinned: ['spec.pinned,desc'],
+}
+
+/** 筛选维度:分类筛选 + 排序 */
+const filterConfig = computed<IFilterItem[]>(() => [
+  {
+    key: 'category',
+    label: '分类',
+    options: [
+      { label: '全部', value: '' },
+      ...categoryList.value.map(c => ({ label: c.spec.displayName, value: c.metadata.name })),
+    ],
+  },
+  {
+    key: 'sort',
+    label: '排序',
+    options: [
+      { label: '默认排序', value: 'default' },
+      { label: '最新', value: 'latest' },
+      { label: '最旧', value: 'oldest' },
+      { label: '置顶', value: 'pinned' },
+    ],
+  },
+])
+
+/** 各维度当前选中值(空串 = 全部) */
+const filterValues = ref<Record<string, string>>({ category: '', sort: 'default' })
+
+/** 当前选中中文标签(用于筛选栏展示) */
+const filterLabels = computed(() => {
+  const map: Record<string, string> = {}
+  for (const f of filterConfig.value) {
+    const cur = filterValues.value[f.key]
+    map[f.key] = f.options.find(o => o.value === cur)?.label || f.options[0].label
+  }
+  return map
+})
+
+/** 筛选弹层 */
+const filterPopup = ref<{ show: boolean, item: IFilterItem | null }>({ show: false, item: null })
+
+function handleOpenFilter(item: IFilterItem) {
+  filterPopup.value = { show: true, item }
+}
+
+/** 选择筛选/排序:重置分页并重新查询 */
+function handleSelectFilter(option: IFilterOption) {
+  const item = filterPopup.value.item
+  if (!item)
+    return
+  filterValues.value[item.key] = option.value
+  filterPopup.value.show = false
+  isLoadMore.value = false
+  articleList.value = []
+  queryParams.value.page = 1
+  handleGetArticleList()
+}
+
+/** 拉取分类列表(用于筛选选项) */
+async function handleGetCategoryList() {
+  try {
+    const res = await getCategoryList({ page: 1, size: 0, tree: true })
+    categoryList.value = res.data.items || []
+  }
+  catch (err) {
+    console.error('获取分类列表失败', err)
+  }
+}
+
+/* ---------------- 数据加载 ---------------- */
+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'] })
+      const filtered = res.data.items.filter(item => auditPostNames.includes(item.metadata.name))
+      articleList.value = filtered.map((item) => {
+        item.owner.avatar = checkAvatarUrl(item.owner.avatar)
+        return item
+      })
+      updateLoadingStatus(articleList.value.length === 0 ? DataLoadingStatusEnum.Empty : DataLoadingStatusEnum.Success)
+      loadMoreText.value = t('common.noMore')
+    }
+    catch (err) {
+      console.error('获取审核文章失败', err)
+      updateLoadingStatus(DataLoadingStatusEnum.Error)
+      loadMoreText.value = t('common.loadFailed')
+    }
+    finally {
+      uni.stopPullDownRefresh()
+    }
+    return
+  }
+
+  if (!isLoadMore.value) {
+    updateLoadingStatus(DataLoadingStatusEnum.Loading)
+  }
+  loadMoreText.value = t('common.loading')
+
+  try {
+    // 应用分类筛选与排序参数
+    const params = {
+      ...queryParams.value,
+      category: filterValues.value.category || undefined,
+      sort: sortMap[filterValues.value.sort] || sortMap.default,
+    }
+    const res = await getPostList(params)
+    hasNext.value = res.data.hasNext
+    articleList.value = (isLoadMore.value
+      ? articleList.value.concat(res.data.items)
+      : res.data.items).map((item) => {
+      item.owner.avatar = checkAvatarUrl(item.owner.avatar)
+      return item
+    })
+    updateLoadingStatus(articleList.value.length === 0 ? DataLoadingStatusEnum.Empty : DataLoadingStatusEnum.Success)
+    loadMoreText.value = res.data.hasNext ? t('common.loadMore') : t('common.noMore')
+  }
+  catch (err) {
+    updateLoadingStatus(DataLoadingStatusEnum.Error)
+    loadMoreText.value = t('common.loadFailed')
+    console.error('获取文章失败', err)
+  }
+  finally {
+    uni.stopPullDownRefresh()
+  }
+}
+
+function handleToTopPage(duration = 500) {
+  uni.pageScrollTo({
+    scrollTop: 0,
+    duration,
+    fail: (err) => {
+      console.error('回顶失败', err)
+    },
+  })
+}
+
+/* ---------------- 生命周期 ---------------- */
+onLoad(() => {
+  handleGetCategoryList()
+  handleGetArticleList()
+})
+
+onPullDownRefresh(() => {
+  if (calcAuditModeEnabled.value) {
+    uni.stopPullDownRefresh()
+    return
+  }
+  isLoadMore.value = false
+  queryParams.value.page = 1
+  articleList.value = []
+  handleGetArticleList()
+})
+
+onReachBottom(() => {
+  if (calcAuditModeEnabled.value) {
+    uni.showToast({ icon: 'none', title: '没有更多数据了' })
+    return
+  }
+  if (hasNext.value) {
+    queryParams.value.page += 1
+    isLoadMore.value = true
+    handleGetArticleList()
+  }
+  else {
+    uni.showToast({ icon: 'none', title: '没有更多数据了' })
+  }
+})
 </script>
 
 <template>
-	<view class="w-full min-h-screen bg-page">
-		<uh-navbar default-title="文章列表" :need-placeholder="true" title-color="text-gray-900"></uh-navbar>
+  <view class="app-page min-h-screen w-screen flex flex-col bg-page">
+    <!-- 自定义导航 -->
+    <uh-navbar default-title="文章列表" title-color="text-gray-900" />
 
-		<!-- 内容区：由于 uh-navbar 内置有占位，所以我们的页面的主要内容应该从这里开始，比如这里就可以设置内边距或者其他样式，最外层的 	<view class="w-full min-h-screen bg-page"> 仅作为容器-->
-		<view class="box-border px-3">
-			<!-- 加载状态 -->
-			<uh-data-loading v-if="loadingStatus!==DataLoadingStatusEnum.Success" :loading-status="loadingStatus"
-				min-height="80vh"></uh-data-loading>
+    <!-- 筛选栏:分类 + 排序 -->
+    <view class="box-border flex items-center justify-between gap-x-2 px-3 pt-2">
+      <view
+        v-for="f in filterConfig" :key="f.key"
+        class="uh-global-card-glass box-border flex flex-1 items-center justify-center gap-1 border rounded-full px-2 py-1 text-gray-500"
+        :class="[filterValues[f.key] !== f.options[0].value ? 'bg-secondary text-gray-900 font-bold' : 'bg-white/80 text-gray-600']"
+        @click="handleOpenFilter(f)"
+      >
+        <text class="truncate text-xs">{{ filterLabels[f.key] }}</text>
+        <wd-icon name="arrow-down" size="10px" />
+      </view>
+    </view>
 
-			<!-- 实际内容 -->
-			<view v-else>
-				请求成功啦
-			</view>
-		</view>
-	</view>
-</template>
\ No newline at end of file
+    <!-- 加载/错误/空占位(状态机) -->
+    <uh-data-loading
+      v-if="loadingStatus !== DataLoadingStatusEnum.Success"
+      :loading-status="loadingStatus"
+      empty-text="博主还没有发布文章呢~"
+      min-height="60vh"
+      @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
+          v-for="(article, index) in articleList"
+          :key="article.metadata.name || index"
+          from="articles"
+          variant="grid"
+          :article="article"
+          :audit-mode="calcAuditModeEnabled"
+        />
+      </view>
+      <view class="box-border py-5 text-center text-xs text-gray-400">
+        {{ loadMoreText }}
+      </view>
+    </view>
+
+    <!-- 回顶 -->
+    <view
+      class="to-top-btn fixed bottom-[160rpx] right-6 z-6 h-[72rpx] w-[72rpx] flex items-center justify-center rounded-full bg-white shadow-sm"
+      @click="handleToTopPage()"
+    >
+      <wd-icon name="arrow-up" size="20px" color="#03a9f4" />
+    </view>
+
+    <!-- 筛选弹层 -->
+    <uh-glass-popup v-model="filterPopup.show" :z-index="99" position="bottom" custom-class="rounded-2xl">
+      <view v-if="filterPopup.item" class="box-border p-4">
+        <view class="text-md mb-4 text-center text-gray-900 font-bold">
+          {{ filterPopup.item.label }}
+        </view>
+        <view class="flex flex-col gap-2">
+          <view
+            v-for="opt in filterPopup.item.options" :key="opt.label"
+            class="uh-global-card-glass box-border border rounded-xl px-5 py-2 text-center text-sm"
+            :class="filterValues[filterPopup.item.key] === opt.value ? 'bg-primary text-gray-900 font-bold' : 'text-gray-700'"
+            @click="handleSelectFilter(opt)"
+          >
+            {{ opt.label }}
+          </view>
+        </view>
+      </view>
+    </uh-glass-popup>
+  </view>
+</template>
diff --git a/src/pages/tabbar/home/home.vue b/src/pages/tabbar/home/home.vue
index 3b0b13a..75f4cfc 100644
--- a/src/pages/tabbar/home/home.vue
+++ b/src/pages/tabbar/home/home.vue
@@ -1,224 +1,274 @@
 <script lang="ts" setup>
-	import { computed, onMounted, ref } from 'vue'
-	import { onPullDownRefresh, onReachBottom, onShow } from '@dcloudio/uni-app'
-	import { getPostList } from '@/api/halo'
-	import { useAppConfigStore } from '@/store/appConfig'
-	import { useSettingStore } from '@/store/setting'
-	import { checkAvatarUrl, checkImageUrl } from '@/utils/url'
-	import { t } from '@/locale'
-	import { useMaintenanceIntercept } from '@/hooks/useMaintenanceIntercept'
-	import { DataLoadingStatusEnum, useDataLoadingStatus } from '@/hooks/useDataLoadingStatus'
-	import type { IPost } from '@/api/types/halo'
+import { computed, ref } from 'vue'
+import { onPullDownRefresh, onReachBottom, onShow } from '@dcloudio/uni-app'
+import { getPostList } from '@/api/halo'
+import { useAppConfigStore } from '@/store/appConfig'
+import { useSettingStore } from '@/store/setting'
+import { checkAvatarUrl, checkImageUrl } from '@/utils/url'
+import { t } from '@/locale'
+import { useMaintenanceIntercept } from '@/hooks/useMaintenanceIntercept'
+import { DataLoadingStatusEnum, useDataLoadingStatus } from '@/hooks/useDataLoadingStatus'
+import type { IPost } from '@/api/types/halo'
 
-	definePage({
-		style: {
-			navigationBarTitleText: '首页',
-			enablePullDownRefresh: true,
-			navigationStyle: 'custom',
-		},
-	})
+definePage({
+  style: {
+    navigationBarTitleText: '首页',
+    enablePullDownRefresh: true,
+    navigationStyle: 'custom',
+  },
+})
 
-	const appConfigStore = useAppConfigStore()
-	const settingStore = useSettingStore()
+const appConfigStore = useAppConfigStore()
+const settingStore = useSettingStore()
 
-	/** 维护拦截(插件可用性 + 维护模式,任一命中跳维护页;与入口页共用 hooks) */
-	const { interceptOrContinue } = useMaintenanceIntercept()
-	/** 是否已被拦截(配置已带维护键时同步置位,避免首载闪跳) */
-	const intercepted = ref(!!appConfigStore.configs.maintenance)
+/** 维护拦截(插件可用性 + 维护模式,任一命中跳维护页;与入口页共用 hooks) */
+const { interceptOrContinue } = useMaintenanceIntercept()
+/** 是否已被拦截(配置已带维护键时同步置位,避免首载闪跳) */
+const intercepted = ref(!!appConfigStore.configs.maintenance)
 
-	const haloConfigs = computed(() => appConfigStore.configs)
+const haloConfigs = computed(() => appConfigStore.configs)
 
-	/* ---------------- 状态 ---------------- */
-	const { loadingStatus, updateLoadingStatus } = useDataLoadingStatus()
-	const isLoadMore = ref(false)
-	const loadMoreText = ref(t('common.loading'))
-	const articleList = ref<IPost[]>([])
+/* ---------------- 状态 ---------------- */
+const { loadingStatus, updateLoadingStatus } = useDataLoadingStatus()
+const isLoadMore = ref(false)
+const loadMoreText = ref(t('common.loading'))
+const articleList = ref<IPost[]>([])
 
-	const result = ref<{ hasNext : boolean }>({ hasNext: false })
+const result = ref<{ hasNext: boolean }>({ hasNext: false })
 
-	const queryParams = ref({
-		size: 5,
-		page: 1,
-		sort: ['spec.pinned,desc', 'spec.publishTime,desc'],
-	})
+const queryParams = ref({
+  size: 10,
+  page: 1,
+  sort: ['spec.pinned,desc', 'spec.publishTime,desc'],
+})
 
-	/* ---------------- 计算属性 ---------------- */
-	const appInfo = computed(() => {
-		const appInfoData = haloConfigs.value.appConfig?.appInfo as { name ?: string, logo ?: string } | undefined
-		return {
-			name: appInfoData?.name || 'uni-halo',
-			logo: checkImageUrl(appInfoData?.logo),
-		}
-	})
+/* ---------------- 最新推荐模式(默认/置顶/最新/最旧) ---------------- */
+const recommendTabs = [
+  { label: '默认', value: 'default' },
+  { label: '置顶', value: 'pinned' },
+  { label: '最新', value: 'latest' },
+  { label: '最旧', value: 'oldest' },
+]
 
-	const bloggerInfo = computed(() => {
-		const blogger = haloConfigs.value.authorConfig?.blogger as { nickname ?: string, avatar ?: string } | undefined
-		return {
-			nickname: blogger?.nickname || '',
-			avatar: checkAvatarUrl(blogger?.avatar),
-		}
-	})
+const recommendMode = ref<'default' | 'pinned' | 'latest' | 'oldest'>('default')
 
-	const calcAuditModeEnabled = computed(() => appConfigStore.auditModeEnabled)
+/** 各模式对应排序参数(默认 = 置顶优先 + 发布时间倒序) */
+const recommendSortMap: Record<string, string[]> = {
+  default: ['spec.pinned,desc', 'spec.publishTime,desc'],
+  pinned: ['spec.pinned,desc'],
+  latest: ['spec.publishTime,desc'],
+  oldest: ['spec.publishTime,asc'],
+}
 
-	const globalAppSettings = computed(() => settingStore.settings)
+/** 切换推荐模式:重置分页并重新查询 */
+function handleRecommendModeChange(mode: 'default' | 'pinned' | 'latest' | 'oldest') {
+  if (recommendMode.value === mode)
+    return
+  recommendMode.value = mode
+  isLoadMore.value = false
+  articleList.value = []
+  queryParams.value.page = 1
+  queryParams.value.sort = recommendSortMap[mode]
+  handleGetArticleList()
+}
 
-	/* ---------------- 数据加载 ---------------- */
-	async function handleQuery() {
-		handleGetArticleList()
-	}
+/* ---------------- 计算属性 ---------------- */
+const appInfo = computed(() => {
+  const appInfoData = haloConfigs.value.appConfig?.appInfo as { name?: string, logo?: string } | undefined
+  return {
+    name: appInfoData?.name || 'uni-halo',
+    logo: checkImageUrl(appInfoData?.logo),
+  }
+})
 
-	/** 文章列表 */
-	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'] })
-				const filtered = res.data.items.filter(item => auditPostNames.includes(item.metadata.name))
-				articleList.value = filtered.map((item) => {
-					item.owner.avatar = checkAvatarUrl(item.owner.avatar)
-					return item
-				})
-				updateLoadingStatus(articleList.value.length === 0 ? DataLoadingStatusEnum.Empty : DataLoadingStatusEnum.Success)
-				loadMoreText.value = t('common.noMore')
-			}
-			catch (err) {
-				console.error('获取审核文章失败', err)
-				updateLoadingStatus(DataLoadingStatusEnum.Error)
-				loadMoreText.value = t('common.loadFailed')
-			}
-			finally {
-				uni.hideLoading()
-				uni.stopPullDownRefresh()
-			}
-			return
-		}
+const bloggerInfo = computed(() => {
+  const blogger = haloConfigs.value.authorConfig?.blogger as { nickname?: string, avatar?: string } | undefined
+  return {
+    nickname: blogger?.nickname || '',
+    avatar: checkAvatarUrl(blogger?.avatar),
+  }
+})
 
-		if (!isLoadMore.value) {
-			updateLoadingStatus(DataLoadingStatusEnum.Loading)
-		}
-		loadMoreText.value = t('common.loading')
+const calcAuditModeEnabled = computed(() => appConfigStore.auditModeEnabled)
 
-		try {
-			const res = await getPostList({ ...toRaw(queryParams.value) })
-			result.value.hasNext = res.data.hasNext
-			articleList.value = (isLoadMore.value
-				? articleList.value.concat(res.data.items)
-				: res.data.items).map((item) => {
-					item.owner.avatar = checkAvatarUrl(item.owner.avatar)
-					return item
-				})
-			updateLoadingStatus(articleList.value.length === 0 ? DataLoadingStatusEnum.Empty : DataLoadingStatusEnum.Success)
-			loadMoreText.value = res.data.hasNext ? t('common.loadMore') : t('common.noMore')
-		}
-		catch (err) {
-			updateLoadingStatus(DataLoadingStatusEnum.Error)
-			loadMoreText.value = t('common.loadFailed')
-			console.error('获取文章失败', err)
-		}
-		finally {
-			uni.hideLoading()
-			uni.stopPullDownRefresh()
-		}
-	}
+const globalAppSettings = computed(() => settingStore.settings)
 
-	/* ---------------- 跳转 ---------------- */
-	
-	function handleToArticles() {
-		uni.navigateTo({ url: '/pages-blog/articles/articles' })
-	}
+/* ---------------- 数据加载 ---------------- */
+async function handleQuery() {
+  handleGetArticleList()
+}
 
-	function handleOnLogoToPage() {
-		uni.switchTab({ url: '/pages/tabbar/about/about' })
-	}
+/** 文章列表 */
+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'] })
+      const filtered = res.data.items.filter(item => auditPostNames.includes(item.metadata.name))
+      articleList.value = filtered.map((item) => {
+        item.owner.avatar = checkAvatarUrl(item.owner.avatar)
+        return item
+      })
+      updateLoadingStatus(articleList.value.length === 0 ? DataLoadingStatusEnum.Empty : DataLoadingStatusEnum.Success)
+      loadMoreText.value = t('common.noMore')
+    }
+    catch (err) {
+      console.error('获取审核文章失败', err)
+      updateLoadingStatus(DataLoadingStatusEnum.Error)
+      loadMoreText.value = t('common.loadFailed')
+    }
+    finally {
+      uni.hideLoading()
+      uni.stopPullDownRefresh()
+    }
+    return
+  }
 
-	function handleToTopPage(duration = 500) {
-		uni.pageScrollTo({
-			scrollTop: 0,
-			duration,
-			fail: (err) => {
-				console.error('回顶失败', err)
-			},
-		})
-	}
+  if (!isLoadMore.value) {
+    updateLoadingStatus(DataLoadingStatusEnum.Loading)
+  }
+  loadMoreText.value = t('common.loading')
 
-	function init() {
-		if (!intercepted.value) {
-			handleQuery()
-		}
-	}
-	init()
+  try {
+    const res = await getPostList({ ...toRaw(queryParams.value) })
+    result.value.hasNext = res.data.hasNext
+    articleList.value = (isLoadMore.value
+      ? articleList.value.concat(res.data.items)
+      : res.data.items).map((item) => {
+      item.owner.avatar = checkAvatarUrl(item.owner.avatar)
+      return item
+    })
+    updateLoadingStatus(articleList.value.length === 0 ? DataLoadingStatusEnum.Empty : DataLoadingStatusEnum.Success)
+    loadMoreText.value = res.data.hasNext ? t('common.loadMore') : t('common.noMore')
+  }
+  catch (err) {
+    updateLoadingStatus(DataLoadingStatusEnum.Error)
+    loadMoreText.value = t('common.loadFailed')
+    console.error('获取文章失败', err)
+  }
+  finally {
+    uni.hideLoading()
+    uni.stopPullDownRefresh()
+  }
+}
 
-	/* ---------------- 生命周期 ---------------- */
+/* ---------------- 跳转 ---------------- */
 
-	// 维护检查
-	onShow(async () => {
-		intercepted.value = await interceptOrContinue()
-		console.log('拦截状态', intercepted.value)
-	})
+/** 更多文章:跳转文章列表页 */
+function handleToArticles() {
+  uni.navigateTo({ url: '/pages-blog/articles/articles' })
+}
 
-	onPullDownRefresh(() => {
-		isLoadMore.value = false
-		queryParams.value.page = 1
-		handleQuery()
-	})
+function handleOnLogoToPage() {
+  uni.switchTab({ url: '/pages/tabbar/about/about' })
+}
 
-	onReachBottom(() => {
-		if (calcAuditModeEnabled.value) {
-			uni.showToast({ icon: 'none', title: t('common.noMoreData') })
-			return
-		}
-		if (result.value.hasNext) {
-			queryParams.value.page += 1
-			isLoadMore.value = true
-			handleGetArticleList()
-		}
-		else {
-			uni.showToast({ icon: 'none', title: t('common.noMoreData') })
-		}
-	})
+function handleToTopPage(duration = 500) {
+  uni.pageScrollTo({
+    scrollTop: 0,
+    duration,
+    fail: (err) => {
+      console.error('回顶失败', err)
+    },
+  })
+}
+
+function init() {
+  if (!intercepted.value) {
+    handleQuery()
+  }
+}
+init()
+
+/* ---------------- 生命周期 ---------------- */
+
+// 维护检查
+onShow(async () => {
+  intercepted.value = await interceptOrContinue()
+  console.log('拦截状态', intercepted.value)
+})
+
+onPullDownRefresh(() => {
+  isLoadMore.value = false
+  queryParams.value.page = 1
+  handleQuery()
+})
+
+onReachBottom(() => {
+  if (calcAuditModeEnabled.value) {
+    uni.showToast({ icon: 'none', title: t('common.noMoreData') })
+    return
+  }
+  if (result.value.hasNext) {
+    queryParams.value.page += 1
+    isLoadMore.value = true
+    handleGetArticleList()
+  }
+  else {
+    uni.showToast({ icon: 'none', title: t('common.noMoreData') })
+  }
+})
 </script>
 
 <template>
-	<view class="min-h-screen w-screen flex flex-col bg-page">
-		<!-- 轮播 -->
-		<uh-home-banner />
+  <view class="min-h-screen w-screen flex flex-col bg-page">
+    <!-- 轮播 -->
+    <uh-home-banner />
 
-		<!-- 公告 -->
-		<uh-home-notify />
+    <!-- 公告 -->
+    <uh-home-notify />
 
-		<!-- 快捷导航 -->
-		<uh-home-quick-nav />
+    <!-- 快捷导航 -->
+    <uh-home-quick-nav />
 
-		<!-- 精选分类 -->
-		<uh-home-category />
+    <!-- 精选分类 -->
+    <uh-home-category />
 
-		<!-- 最新文章 -->
-		<uh-section-title class="mb-4 box-border px-3">
-			最新推荐
-			<template #right>
-				<view class="uh-global-card-glass flex items-center justify-center  gap-x-1 rounded-md p-1 text-gray-400"
-					@click="handleToArticles()">
-					<wd-icon name="arrow-right" size="12px" />
-				</view>
-			</template>
-		</uh-section-title>
+    <!-- 最新文章 -->
+    <uh-section-title class="mb-4 box-border px-3">
+      最新推荐
+      <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
+              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')"
+            >
+              {{ tab.label }}
+            </view>
+          </view>
+          <!-- 更多(查看全部文章) -->
+          <view
+            class="uh-global-card-glass flex items-center justify-center gap-x-1 rounded-md p-1 text-gray-400"
+            @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"
-			min-height="36vh" @refresh="handleQuery" />
+    <!-- 加载/错误占位 -->
+    <uh-data-loading
+      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 v-for="(article, index) in articleList" :key="index"
-				 from="home" :article="article" :audit-mode="calcAuditModeEnabled"
-				 />
-			</view>
-			<view class="box-border mt-3 pb-5 text-center text-xs text-gray-400">
-				{{ loadMoreText }}
-			</view>
-		</block>
-	</view>
-	<uh-notify-dialog />
-</template>
\ No newline at end of file
+    <block v-else>
+      <view class="box-border 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" :audit-mode="calcAuditModeEnabled"
+        />
+      </view>
+      <view class="mt-3 box-border pb-5 text-center text-xs text-gray-400">
+        {{ loadMoreText }}
+      </view>
+    </block>
+  </view>
+  <uh-notify-dialog />
+</template>