From b0290456bb8b74ff18a00dce3c165807b4774607 Mon Sep 17 00:00:00 2001
From: zheng020 <zheng02007@163.com>
Date: Thu, 11 Jun 2026 12:43:09 +0800
Subject: [PATCH] fix(square): use ref-binding for scrollTop reset; add bottom
 safety margin

---
 .../square/components/HotCategoryBlock.vue    | 178 ++++++++++--------
 frontend/pages/square/square.vue              |   6 +-
 2 files changed, 105 insertions(+), 79 deletions(-)

diff --git a/frontend/pages/square/components/HotCategoryBlock.vue b/frontend/pages/square/components/HotCategoryBlock.vue
index ae08c31..d6db8e8 100644
--- a/frontend/pages/square/components/HotCategoryBlock.vue
+++ b/frontend/pages/square/components/HotCategoryBlock.vue
@@ -24,96 +24,104 @@
       </view>
     </view>
 
-    <!-- 骨架屏 -->
-    <view v-if="loading" class="grid-skeleton">
-      <view v-for="i in 11" :key="i" class="skeleton-card">
-        <view class="skeleton-image"></view>
-        <view class="skeleton-info">
-          <view class="skeleton-avatar"></view>
-          <view class="skeleton-name"></view>
+    <!-- 内容区域: 内部 scroll -->
+    <scroll-view
+      class="content-scroll"
+      scroll-y
+      :show-scrollbar="false"
+      :bounce="false"
+    >
+      <!-- 骨架屏 -->
+      <view v-if="loading" class="grid-skeleton">
+        <view v-for="i in 11" :key="i" class="skeleton-card">
+          <view class="skeleton-image"></view>
+          <view class="skeleton-info">
+            <view class="skeleton-avatar"></view>
+            <view class="skeleton-name"></view>
+          </view>
         </view>
       </view>
-    </view>
 
-    <!-- 内容网格 -->
-    <view v-else class="items-grid">
-      <view
-        v-for="(item, index) in items"
-        :key="item.id || index"
-        class="grid-card"
-        :class="{
-          [`grid-card-top-${index + 1}`]: index < 5,
-          'grid-card-top-other': index >= 5,
-        }"
-        @click="handleCardClick(item)"
-      >
-        <!-- 点赞动效波纹 -->
+      <!-- 内容网格 -->
+      <view v-else class="items-grid">
         <view
-          class="wf-like-wave wf-like-wave-outer"
-          :class="{ 'wf-like-wave-active': likingMap[item.id] }"
-        />
-        <view
-          class="wf-like-wave wf-like-wave-inner"
-          :class="{ 'wf-like-wave-active': likingMap[item.id] }"
-        />
-
-        <!-- 单行布局：藏品图片 + 头像 + 点赞数 + TOP 标签 -->
-        <view class="card-row">
-          <view class="card-image-wrap">
-            <image
-              class="card-image"
-              :src="item.cover_url || item.cover_image || ''"
-              mode="aspectFill"
-            />
-            <!-- 前 3 名专属：包裹整个卡片的边框图 -->
-            <image
-              v-if="index < 3"
-              class="frame-image"
-              :src="TOP_FRAME_MAP[index]"
-              mode="scaleToFill"
-            />
-            <!-- 前 3 名专属：左上角奖牌装饰 -->
-            <image
-              v-if="index < 3"
-              class="card-medal"
-              :src="MEDAL_MAP[index]"
-              mode="aspectFit"
-            />
-          </view>
+          v-for="(item, index) in items"
+          :key="item.id || index"
+          class="grid-card"
+          :class="{
+            [`grid-card-top-${index + 1}`]: index < 5,
+            'grid-card-top-other': index >= 5,
+          }"
+          @click="handleCardClick(item)"
+        >
+          <!-- 点赞动效波纹 -->
           <view
-            class="like-info"
-            :class="{ [`like-info-top-${index + 1}`]: index < 3 }"
-          >
-            <view class="like-row">
+            class="wf-like-wave wf-like-wave-outer"
+            :class="{ 'wf-like-wave-active': likingMap[item.id] }"
+          />
+          <view
+            class="wf-like-wave wf-like-wave-inner"
+            :class="{ 'wf-like-wave-active': likingMap[item.id] }"
+          />
+
+          <!-- 单行布局：藏品图片 + 头像 + 点赞数 + TOP 标签 -->
+          <view class="card-row">
+            <view class="card-image-wrap">
               <image
-                class="like-icon"
-                :src="
-                  item.is_liked
-                    ? '/static/icon/heart-icon.png'
-                    : '/static/icon/heart-icon-false.png'
-                "
+                class="card-image"
+                :src="item.cover_url || item.cover_image || ''"
+                mode="aspectFill"
+              />
+              <!-- 前 3 名专属：包裹整个卡片的边框图 -->
+              <image
+                v-if="index < 3"
+                class="frame-image"
+                :src="TOP_FRAME_MAP[index]"
+                mode="scaleToFill"
+              />
+              <!-- 前 3 名专属：左上角奖牌装饰 -->
+              <image
+                v-if="index < 3"
+                class="card-medal"
+                :src="MEDAL_MAP[index]"
                 mode="aspectFit"
               />
-              <text class="like-count">{{ formatCount(item.like_count) }}</text>
             </view>
-            <text class="user-name">{{
-              item.owner_nickname || item.creator_name || item.name || ""
-            }}</text>
-            <text class="user-number">No.{{ item.owner_uid || "" }}</text>
-          </view>
-          <view v-if="index >= 3" class="top-badge">
-            <view class="badge-rank">
-              <image
-                class="badge-rank-icon"
-                src="/static/square/top/top.png"
-                mode="aspectFit"
-              />
-              <text class="badge-rank-number">{{ index + 1 }}</text>
+            <view
+              class="like-info"
+              :class="{ [`like-info-top-${index + 1}`]: index < 3 }"
+            >
+              <view class="like-row">
+                <image
+                  class="like-icon"
+                  :src="
+                    item.is_liked
+                      ? '/static/icon/heart-icon.png'
+                      : '/static/icon/heart-icon-false.png'
+                  "
+                  mode="aspectFit"
+                />
+                <text class="like-count">{{ formatCount(item.like_count) }}</text>
+              </view>
+              <text class="user-name">{{
+                item.owner_nickname || item.creator_name || item.name || ""
+              }}</text>
+              <text class="user-number">No.{{ item.owner_uid || "" }}</text>
+            </view>
+            <view v-if="index >= 3" class="top-badge">
+              <view class="badge-rank">
+                <image
+                  class="badge-rank-icon"
+                  src="/static/square/top/top.png"
+                  mode="aspectFit"
+                />
+                <text class="badge-rank-number">{{ index + 1 }}</text>
+              </view>
             </view>
           </view>
         </view>
       </view>
-    </view>
+    </scroll-view>
   </view>
 </template>
 
@@ -305,11 +313,21 @@ onUnmounted(() => {
 
 <style scoped lang="scss">
 .hot-category-block {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
   padding: 0 9.5rpx;
   border-radius: 24rpx;
   position: relative;
 }
 
+.content-scroll {
+  flex: 1;
+  min-height: 0; /* flex 子项需要 min-height: 0 才能正确伸缩 */
+  overflow: hidden;
+}
+
 /* Tab 栏 —— 与 Figma Rectangle 90 (83:268) 一一对应 */
 .ranking-tabs {
   display: flex;
@@ -480,7 +498,11 @@ onUnmounted(() => {
   border-bottom-right-radius: 12px;
   border-bottom-left-radius: 12px;
   opacity: 0.8; /* 与 Figma 一致 */
-  padding: 40rpx 20rpx 0;
+  /* padding: 40rpx 20rpx 0; */
+  /* 修复：原 80rpx 底部安全距离在 Task 2 被 .hot-category-wrapper 固定 height 替代,
+     重新加上 32rpx 底部 padding 保证最后一行卡片不会紧贴 scroll-view 底边
+     （避免与 BottomNav 的 fixed 区域视觉重叠）。 */
+  padding: 40rpx 20rpx 32rpx;
   overflow: hidden;
 }
 
diff --git a/frontend/pages/square/square.vue b/frontend/pages/square/square.vue
index e59eaeb..943a62d 100644
--- a/frontend/pages/square/square.vue
+++ b/frontend/pages/square/square.vue
@@ -46,6 +46,7 @@
     <scroll-view
       class="content-wrapper"
       :scroll-y="activeContentTab === 'guangchang'"
+      :scroll-top="outerScrollTop"
       :show-scrollbar="false"
       :bounce="false"
       @scroll="onScroll"
@@ -120,11 +121,14 @@ const showRankingModal = ref(false);
 const creationGridRef = ref(null);
 const cardTapTimers = {};
 const likingMap = ref({});
+// 外层 scroll-view 的 scrollTop 受控值：通过 ref 绑定实现程序化重置
+// （uni.pageScrollTo 操作的是 page 滚动条，不会作用于 <scroll-view>）
+const outerScrollTop = ref(0);
 
 // 切 tab 时重置外层 scroll-view 的 scrollTop,避免残留滚动位置
 watch(activeContentTab, () => {
   // 星河/星榜 时 scroll-y=false,但 scrollTop 残留可能导致显示异常
-  uni.pageScrollTo({ scrollTop: 0, duration: 0 });
+  outerScrollTop.value = 0;
 });
 
 // 统一 scroll 处理：驱动 CreationGrid 切 fixed