feat: 重构文章卡片与列表页，新增多布局与筛选功能

1. 新增文章卡片grid紧凑布局，支持隐藏分类标签与单行摘要
2. 重构文章列表页，添加分类筛选、排序功能与两列卡片布局
3. 首页新增推荐模式切换，支持默认/置顶/最新/最旧排序
4. 统一代码缩进与格式规范，完善类型定义与注释

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

@@ -3,15 +3,18 @@
 import { checkThumbnailUrl } from '@/utils/url'
 import { useSettingStore } from '@/store/setting'
 import { formatTime } from '@/utils/formatTime'
-	import type { IPost,ICategory } from '@/api/types/halo'
+import type { ICategory, IPost } from '@/api/types/halo'
 
 const props = withDefaults(defineProps<{
   from?: string
   auditMode?: boolean
   article: IPost
+  /** 卡片形态:list=常规列表卡(默认),grid=两列紧凑卡(隐藏分类/标签,摘要单行) */
+  variant?: 'list' | 'grid'
 }>(), {
   auditMode: false,
   from: '',
+  variant: 'list',
 })
 
 const settingStore = useSettingStore()
@@ -29,6 +32,9 @@
   return [layout.home, layout.cardType]
 })
 
+/** grid 紧凑模式(两列:隐藏分类/标签,摘要单行,底部精简) */
+const isGrid = computed(() => props.variant === 'grid')
+
 /** 发布时间格式化 yyyy-MM-dd */
 const publishTimeText = computed(() => {
   const time = props.article.spec.publishTime
@@ -58,37 +64,51 @@
 </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">
+  <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="content line-clamp-2 text-gray-600">
+      <view :class="isGrid ? 'content line-clamp-1 text-gray-600' : 'content line-clamp-2 text-gray-600'">
         {{ article.status?.excerpt }}
       </view>
-			<view class="my-1 box-border flex flex-wrap gap-2">
+      <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="py-1 px-2 text-xs rounded-xl bg-secondary" @click.stop="handleToCategory(cate)">
+          <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="py-1 px-2 text-xs rounded-xl bg-secondary">
+          <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="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>
+      <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">

src/pages-blog/articles/articles.vue

@@ -1,33 +1,297 @@
-<script setup lang="ts">
+<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',
+    enablePullDownRefresh: true,
   },
 })
-	const { loadingStatus, updateLoadingStatus } = useDataLoadingStatus()
 
-	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 v-else>
-				请求成功啦
+    <!-- 筛选栏:分类 + 排序 -->
+    <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>
+
+    <!-- 加载/错误/空占位(状态机) -->
+    <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>

src/pages/tabbar/home/home.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-	import { computed, onMounted, ref } from 'vue'
+import { computed, ref } from 'vue'
 import { onPullDownRefresh, onReachBottom, onShow } from '@dcloudio/uni-app'
 import { getPostList } from '@/api/halo'
 import { useAppConfigStore } from '@/store/appConfig'
@@ -37,11 +37,41 @@
 const result = ref<{ hasNext: boolean }>({ hasNext: false })
 
 const queryParams = ref({
-		size: 5,
+  size: 10,
   page: 1,
   sort: ['spec.pinned,desc', 'spec.publishTime,desc'],
 })
 
+/* ---------------- 最新推荐模式(默认/置顶/最新/最旧) ---------------- */
+const recommendTabs = [
+  { label: '默认', value: 'default' },
+  { label: '置顶', value: 'pinned' },
+  { label: '最新', value: 'latest' },
+  { label: '最旧', value: 'oldest' },
+]
+
+const recommendMode = ref<'default' | 'pinned' | 'latest' | 'oldest'>('default')
+
+/** 各模式对应排序参数(默认 = 置顶优先 + 发布时间倒序) */
+const recommendSortMap: Record<string, string[]> = {
+  default: ['spec.pinned,desc', 'spec.publishTime,desc'],
+  pinned: ['spec.pinned,desc'],
+  latest: ['spec.publishTime,desc'],
+  oldest: ['spec.publishTime,asc'],
+}
+
+/** 切换推荐模式:重置分页并重新查询 */
+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()
+}
+
 /* ---------------- 计算属性 ---------------- */
 const appInfo = computed(() => {
   const appInfoData = haloConfigs.value.appConfig?.appInfo as { name?: string, logo?: string } | undefined
@@ -125,6 +155,7 @@
 
 /* ---------------- 跳转 ---------------- */
 
+/** 更多文章:跳转文章列表页 */
 function handleToArticles() {
   uni.navigateTo({ url: '/pages-blog/articles/articles' })
 }
@@ -198,24 +229,43 @@
     <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 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"
+        <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">
+      <view class="mt-3 box-border pb-5 text-center text-xs text-gray-400">
         {{ loadMoreText }}
       </view>
     </block>