fix: page is obscured by auxiliary div

src/mobile/components/community/CommunityTab.vue

@@ -1,12 +1,7 @@
 <template>
-  <n-tabs @update:value="onUpdate" :default-value="props.activeTabName" animated>
+  <n-tabs @update:value="onUpdate" :default-value="props.activeTabName" animated class="h-full overflow-hidden tab">
     <n-tab-pane display-directive="show:lazy" v-for="i in props.options" :key="i.name" :name="i.name" :tab="i.tab">
-      <!-- 这里高度写死并不影响下面的高度修正，写高度超过TabBar以防用户手机卡顿看到突然的高度修正的效果视差 -->
-      <div
-        :ref="bindDynamicAreaRef(i.name)"
-        :style="{ height: props.customHeight ? customHeight + 'px' : defaultHeight }"
-        @scroll="handleScroll"
-        class="flex flex-col gap-4 overflow-y-auto">
+      <div :ref="bindDynamicAreaRef(i.name)" @scroll="handleScroll" class="flex flex-col gap-4">
         <!-- 动态消息 -->
         <slot :name="i.name"></slot>
         <!-- 占位元素，避免最后一个动态消息紧贴tabbar -->
@@ -21,8 +16,6 @@ import { type PropType, ref, type VNodeRef } from 'vue'
 
 const emit = defineEmits(['update', 'scroll'])
 
-const defaultHeight = ref('90vh')
-
 const handleScroll = (event: any) => {
   emit('scroll', event)
 }
@@ -66,4 +59,9 @@ const onUpdate = (newTab: string) => {
 }
 </script>
 
-<style scoped></style>
+<style scoped>
+.tab :deep(.n-tabs-pane-wrapper) {
+  flex-grow: 1;
+  overflow-y: auto;
+}
+</style>

src/mobile/views/friends/FriendInfo.vue

@@ -10,80 +10,67 @@
     </template>
 
     <template #container>
-      <div class="flex flex-col overflow-auto h-full">
-        <PersonalInfo :is-my-page="isMyPage" :is-show="isShow"></PersonalInfo>
+      <div class="flex flex-col h-full">
+        <div class="shrink-0">
+          <PersonalInfo :is-my-page="isMyPage" :is-show="isShow"></PersonalInfo>
+        </div>
 
-        <div class="top-0 flex-1 flex w-full border-#13987F border-1">
-          <div ref="measureRef" class="h-full w-full absolute top-0 z-0"></div>
+        <div class="grow-1 overflow-hidden custom-rounded flex px-24px flex-col gap-4 z-1 p-10px mt-4 shadow">
+          <CommunityTab @scroll="handleScroll" @update="onUpdate" :options="tabOptions" active-tab-name="find">
+            <template #find>
+              <!-- 加载状态 -->
+              <div
+                v-if="feedOptions.isLoading && feedList.length === 0"
+                class="flex justify-center items-center py-20px">
+                <n-spin size="large" />
+              </div>
 
-          <div
-            ref="scrollContainer"
-            :style="{ height: tabHeight + 'px' }"
-            class="w-full z-1 overflow-y-auto absolute z-3">
-            <div class="custom-rounded flex px-24px flex-col gap-4 z-1 p-10px mt-4 shadow">
-              <CommunityTab
-                :style="{ height: tabHeight - 10 + 'px' }"
-                :custom-height="tabHeight - 10"
-                @scroll="handleScroll"
-                @update="onUpdate"
-                :options="tabOptions"
-                active-tab-name="find">
-                <template #find>
-                  <!-- 加载状态 -->
-                  <div
-                    v-if="feedOptions.isLoading && feedList.length === 0"
-                    class="flex justify-center items-center py-20px">
-                    <n-spin size="large" />
-                  </div>
+              <!-- 空状态 -->
+              <div v-else-if="feedList.length === 0" class="flex justify-center items-center py-40px text-gray-500">
+                暂无动态
+              </div>
 
-                  <!-- 空状态 -->
-                  <div v-else-if="feedList.length === 0" class="flex justify-center items-center py-40px text-gray-500">
-                    暂无动态
-                  </div>
+              <!-- 动态列表 -->
+              <template v-else>
+                <CommunityContent v-for="item in feedList" :key="item.id" :feed-item="item" />
 
-                  <!-- 动态列表 -->
-                  <template v-else>
-                    <CommunityContent v-for="item in feedList" :key="item.id" :feed-item="item" />
+                <!-- 加载更多 -->
+                <div v-if="!feedOptions.isLast" class="flex justify-center py-15px">
+                  <n-button :loading="feedOptions.isLoading" @click="loadMore" type="primary" text size="small">
+                    {{ feedOptions.isLoading ? '加载中...' : '加载更多' }}
+                  </n-button>
+                </div>
 
-                    <!-- 加载更多 -->
-                    <div v-if="!feedOptions.isLast" class="flex justify-center py-15px">
-                      <n-button :loading="feedOptions.isLoading" @click="loadMore" type="primary" text size="small">
-                        {{ feedOptions.isLoading ? '加载中...' : '加载更多' }}
-                      </n-button>
-                    </div>
+                <!-- 已加载全部 -->
+                <div v-else class="flex justify-center py-15px text-12px text-gray-400">已加载全部</div>
+              </template>
+            </template>
 
-                    <!-- 已加载全部 -->
-                    <div v-else class="flex justify-center py-15px text-12px text-gray-400">已加载全部</div>
-                  </template>
-                </template>
+            <template #follow>
+              <!-- 赞过的动态 -->
+              <div
+                v-if="feedOptions.isLoading && feedList.length === 0"
+                class="flex justify-center items-center py-20px">
+                <n-spin size="large" />
+              </div>
 
-                <template #follow>
-                  <!-- 赞过的动态 -->
-                  <div
-                    v-if="feedOptions.isLoading && feedList.length === 0"
-                    class="flex justify-center items-center py-20px">
-                    <n-spin size="large" />
-                  </div>
+              <div v-else-if="feedList.length === 0" class="flex justify-center items-center py-40px text-gray-500">
+                暂无赞过的动态
+              </div>
 
-                  <div v-else-if="feedList.length === 0" class="flex justify-center items-center py-40px text-gray-500">
-                    暂无赞过的动态
-                  </div>
+              <template v-else>
+                <CommunityContent v-for="item in feedList" :key="item.id" :feed-item="item" />
 
-                  <template v-else>
-                    <CommunityContent v-for="item in feedList" :key="item.id" :feed-item="item" />
+                <div v-if="!feedOptions.isLast" class="flex justify-center py-15px">
+                  <n-button :loading="feedOptions.isLoading" @click="loadMore" type="primary" text size="small">
+                    {{ feedOptions.isLoading ? '加载中...' : '加载更多' }}
+                  </n-button>
+                </div>
 
-                    <div v-if="!feedOptions.isLast" class="flex justify-center py-15px">
-                      <n-button :loading="feedOptions.isLoading" @click="loadMore" type="primary" text size="small">
-                        {{ feedOptions.isLoading ? '加载中...' : '加载更多' }}
-                      </n-button>
-                    </div>
-
-                    <div v-else class="flex justify-center py-15px text-12px text-gray-400">已加载全部</div>
-                  </template>
-                </template>
-              </CommunityTab>
-            </div>
-          </div>
+                <div v-else class="flex justify-center py-15px text-12px text-gray-400">已加载全部</div>
+              </template>
+            </template>
+          </CommunityTab>
         </div>
       </div>
     </template>
@@ -105,12 +92,7 @@ const avatarBox = ref<HTMLElement | null>(null)
 const lastScrollTop = ref(0)
 const hasTriggeredHide = ref(false)
 const infoBox = ref<HTMLElement | null>(null)
-const measureRef = ref<HTMLDivElement>()
 const scrollContainer = ref<HTMLElement | null>(null)
-const tabHeight = ref(300)
-const contentRectObserver = new ResizeObserver((event) => {
-  tabHeight.value = event[0].contentRect.height
-})
 const userStore = useUserStore()
 
 const route = useRoute()
@@ -185,10 +167,6 @@ watch(isShow, (show) => {
 })
 
 onMounted(async () => {
-  if (measureRef.value) {
-    contentRectObserver.observe(measureRef.value)
-  }
-
   if (userStore.userInfo?.uid === uid) {
     isMyPage.value = true
   } else {
@@ -199,12 +177,6 @@ onMounted(async () => {
   await feedStore.getFeedList(true)
 })
 
-onUnmounted(() => {
-  if (measureRef.value) {
-    contentRectObserver.unobserve(measureRef.value)
-  }
-})
-
 const handleScroll = (event: Event) => {
   const target = event.target as HTMLElement
   if (!target) return