feat: 添加 PageHelperEvo 组件，支持分页和自动加载功能，更新首页以使用新组件

packages/app/src/components/page-helper-evo.vue

@@ -1,2 +1,59 @@
-<script setup lang="ts"></script>
-<template><div></div></template>
+<script setup lang="ts" generic="T extends Object, R extends { list: T[] }, Q extends T">
+import { ResPageData } from '../core/libs/models'
+import { NetImages } from '../core/libs/net-images'
+const props = withDefaults(
+  defineProps<{
+    request: (query: any) => Promise<IResData<R>>
+    query: Partial<Q> & { [key: symbol]: any }
+    automatic?: boolean
+  }>(),
+  { automatic: true },
+)
+const slot = defineSlots<{
+  default(props: { data?: R['list']; items?: T[]; source?: R }): any
+}>()
+const pageNo = ref(1)
+const pageSize = ref(10)
+const nomore = ref(false)
+const { data, run: setData } = useRequest(
+  () => props.request({ pageNo: pageNo.value, pageSize: pageSize.value, ...props.query }),
+  { immediate: false },
+)
+const items = ref<T[]>([])
+onMounted(async () => {
+  props.automatic && (await setData())
+  if (props.automatic) {
+    await setData()
+    items.value = data.value?.list || []
+  }
+})
+onReachBottom(async () => {
+  if (data.value?.list?.length < pageSize.value) {
+    return (nomore.value = true)
+  }
+  pageNo.value++
+  await setData()
+  items.value = items.value.concat(data.value?.list || [])
+})
+defineExpose({
+  reload: async () => {
+    pageNo.value = 1
+    pageSize.value = 10
+    await setData()
+  },
+  refresh: async () => {
+    await setData()
+  },
+})
+</script>
+<template>
+  <div class="flex-grow flex flex-col">
+    <template v-if="!items?.length">
+      <wd-status-tip :image="NetImages.NotContent" tip="暂无内容"></wd-status-tip>
+    </template>
+    <slot :source="{ list: items }"></slot>
+    <template v-if="nomore">
+      <div class="my-4"><wd-divider>没有更多了</wd-divider></div>
+    </template>
+  </div>
+</template>

packages/app/src/pages/home/index.vue

@@ -41,6 +41,7 @@ import SectionHeading from '@/components/section-heading.vue'
 import dayjs from 'dayjs'
 import { pick, sort } from 'radash'
 import { Activity, StudyTour } from '../../core/libs/models'
+import PageHelperEvo from '@/components/page-helper-evo.vue'
 
 defineOptions({
   name: 'Home',
@@ -100,9 +101,10 @@ onShow(async () => {
   pageHelperRef.value?.refresh()
   // await setStudyTours()
   // setStudyTours()
+  await Promise.all([setHotActivities()])
 })
 onLoad(async () => {
-  await Promise.all([setIndexConfigsData(), setStudyTours(), setHotActivities()])
+  await Promise.all([setIndexConfigsData(), setStudyTours()])
   // await setIndexConfigsData()
   // await setStudyTours()
   swiperData.value = indexConfigsData.value.list.map((it) => ({
@@ -172,7 +174,7 @@ onShareAppMessage(async ({ from, target }) => {
         <ButtonEvo color="red" size="lg">敌无命</ButtonEvo>
       </div> -->
       <menus></menus>
-      <view class="my-6 mx-3.5">
+      <view v-if="hotActivities?.length" class="my-6 mx-3.5">
         <HotActivity :items="hotActivities"></HotActivity>
       </view>
       <view v-if="features.about" class="my-6 mx-3.5" @click="toAbout()">
@@ -189,7 +191,16 @@ onShareAppMessage(async ({ from, target }) => {
       </view>
       <view class="mx-3.5 text-5 font-400">设计圈</view>
       <view class="mx-3.5">
-        <PageHelper ref="pageHelperRef" :request="getCircles" :query="{}">
+        <PageHelperEvo ref="pageHelperRef" :request="getCircles" class="">
+          <template #default="{ source }">
+            <template v-for="it of source.list" :key="it.id">
+              <view class="my-3">
+                <MomentItem :options="it" @like="handleLike"></MomentItem>
+              </view>
+            </template>
+          </template>
+        </PageHelperEvo>
+        <!-- <PageHelper ref="pageHelperRef" :request="getCircles" :query="{}">
           <template #default="{ source }">
             <template v-for="it of source.list" :key="it.id">
               <view class="my-6">
@@ -197,7 +208,7 @@ onShareAppMessage(async ({ from, target }) => {
               </view>
             </template>
           </template>
-        </PageHelper>
+        </PageHelper> -->
       </view>
     </view>
   </view>