feat: 更新 PageHelperEvo 组件，添加顶部插槽和高度占位功能，优化首页和消息页面的使用

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

@@ -1,33 +1,62 @@
 <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'
+import { getRect, addUnit } from 'wot-design-uni/components/common/util'
+
 const props = withDefaults(
   defineProps<{
     request: (query: any) => Promise<IResData<R>>
-    query: Partial<Q> & { [key: symbol]: any }
+    query?: Partial<Q> & { [key: symbol]: any }
     automatic?: boolean
   }>(),
-  { automatic: true },
+  { automatic: true, query: () => ({}) },
 )
 const slot = defineSlots<{
   default(props: { data?: R['list']; items?: T[]; source?: R }): any
+  top: () => any
 }>()
+const { proxy } = getCurrentInstance() as any
 const pageNo = ref(1)
 const pageSize = ref(10)
 const nomore = ref(false)
+const topRef = ref()
+const height = ref(0)
+const windowInfo = ref()
 const { data, run: setData } = useRequest(
   () => props.request({ pageNo: pageNo.value, pageSize: pageSize.value, ...props.query }),
   { immediate: false },
 )
 const items = ref<T[]>([])
+
+const setPlaceholderHeight = () => {
+  getRect('.bottom-app-bar', false, proxy).then((res) => {
+    height.value = res.height as number
+  })
+}
 onMounted(async () => {
-  props.automatic && (await setData())
+  nextTick(() => {
+    setPlaceholderHeight()
+  })
+  windowInfo.value = await uni.getWindowInfo()
   if (props.automatic) {
+    console.log('Page Helper Automatic')
     await setData()
     items.value = data.value?.list || []
   }
 })
+watch(
+  () => props.query,
+  async () => {
+    console.log('Page Helper Query Change')
+    pageNo.value = 1
+    pageSize.value = 10
+    await setData()
+    items.value = data.value?.list || []
+  },
+)
 onReachBottom(async () => {
+  console.log('Page Helper Reach Bottom')
+
   if (data.value?.list?.length < pageSize.value) {
     return (nomore.value = true)
   }
@@ -37,17 +66,31 @@ onReachBottom(async () => {
 })
 defineExpose({
   reload: async () => {
+    console.log('Page Helper Reload')
     pageNo.value = 1
     pageSize.value = 10
     await setData()
+    items.value = data.value?.list || []
   },
   refresh: async () => {
+    console.log('Page Helper Refresh')
     await setData()
   },
 })
 </script>
 <template>
   <div class="flex-grow flex flex-col">
+    <div class="relative" :style="{ height: addUnit(height) }">
+      <div
+        ref="topRef"
+        class="bottom-app-bar fixed absolute left-0 right-0"
+        :style="{ top: addUnit(windowInfo?.windowTop || 0) }"
+      >
+        <!-- {{ topRef.offsetHeight }} -->
+        <slot name="top"></slot>
+      </div>
+    </div>
+
     <template v-if="!items?.length">
       <wd-status-tip :image="NetImages.NotContent" tip="暂无内容"></wd-status-tip>
     </template>

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

@@ -191,7 +191,7 @@ onShareAppMessage(async ({ from, target }) => {
       </view>
       <view class="mx-3.5 text-5 font-400">设计圈</view>
       <view class="mx-3.5">
-        <PageHelperEvo ref="pageHelperRef" :request="getCircles" class="">
+        <PageHelperEvo ref="pageHelperRef" :request="getCircles" :query="{}" class="">
           <template #default="{ source }">
             <template v-for="it of source.list" :key="it.id">
               <view class="my-3">
@@ -200,15 +200,6 @@ onShareAppMessage(async ({ from, target }) => {
             </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">
-                <MomentItem :options="it" @like="handleLike"></MomentItem>
-              </view>
-            </template>
-          </template>
-        </PageHelper> -->
       </view>
     </view>
   </view>

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

@@ -28,6 +28,7 @@ import MessageCard from './components/message-card.vue'
 import { useMessage } from 'wot-design-uni'
 import CouponsSelector from '../common/components/coupons-selector.vue'
 import { handleClickInstruction } from '../../core/libs/actions'
+import PageHelperEvo from '@/components/page-helper-evo.vue'
 
 const pageHelperRef = ref<ComponentExposed<typeof PageHelper>>()
 const userStore = useUserStore()
@@ -104,18 +105,14 @@ onShow(async () => {
 
 <template>
   <view class="flex-grow flex flex-col">
-    <wd-tabs v-model="tab">
-      <block v-for="({ label }, i) in tabs" :key="i">
-        <wd-tab :title="`${label}`"></wd-tab>
-      </block>
-    </wd-tabs>
-    <PageHelper
-      ref="pageHelperRef"
-      :automatic="false"
-      :request="getMessages"
-      :query="query"
-      class="flex-grow flex flex-col"
-    >
+    <PageHelperEvo ref="pageHelperRef" :request="getMessages" :query="query" :automatic="false">
+      <template #top>
+        <wd-tabs v-model="tab">
+          <block v-for="({ label }, i) in tabs" :key="i">
+            <wd-tab :title="`${label}`"></wd-tab>
+          </block>
+        </wd-tabs>
+      </template>
       <template #default="{ source }">
         <div class="p-3.5 gap-3.5 flex flex-col">
           <template v-for="(it, i) in source.list" :key="i">
@@ -128,7 +125,7 @@ onShow(async () => {
           </template>
         </div>
       </template>
-    </PageHelper>
+    </PageHelperEvo>
     <wd-message-box selector="wd-message-box-slot">
       <!-- <wd-rate custom-class="custom-rate-class" v-model="rate" /> -->
       <wd-config-provider :themeVars="{ textareaBg: 'transparent', textareaCellHeight: '100rpx' }">