From bcc422109cae971000208fa67f7e661284c718b0 Mon Sep 17 00:00:00 2001
From: zheng020 <zheng02007@163.com>
Date: Thu, 28 May 2026 13:00:36 +0800
Subject: [PATCH] feat(square): add 4 HotCategoryBlock components

- Import HotCategoryBlock and getHotInspirationFlowBatchApi
- Add hotCategories and hotCategoryRefs state
- Add loadHotCategories function to fetch categories
- Add handleHotCardClick handler for navigation
- Add template with v-for loop for hot category blocks
- Add CSS style for .hot-category-wrapper
- Call loadHotCategories in onMounted after loadBannerActivities

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
---
 frontend/pages/square/square.vue | 41 ++++++++++++++++++++++++++++++++
 1 file changed, 41 insertions(+)

diff --git a/frontend/pages/square/square.vue b/frontend/pages/square/square.vue
index 767f4a1..c2aef6f 100644
--- a/frontend/pages/square/square.vue
+++ b/frontend/pages/square/square.vue
@@ -70,6 +70,20 @@
         </scroll-view>
       </view>
 
+      <!-- 热门分类区块 -->
+      <view
+        v-for="category in hotCategories"
+        :key="category.type"
+        class="hot-category-wrapper"
+      >
+        <HotCategoryBlock
+          :ref="el => { if(el) hotCategoryRefs[category.type] = el }"
+          :categoryType="category.type"
+          :title="category.title"
+          @cardClick="handleHotCardClick"
+        />
+      </view>
+
       <!-- 区域三：创作网格列表 -->
       <CreationGrid
         :screenWidth="screenWidth"
@@ -94,7 +108,9 @@ import BottomNav from '../components/BottomNav.vue'
 import GuideOverlay from '@/components/GuideOverlay.vue'
 import RankingModal from '../components/RankingModal.vue'
 import BannerCarousel from './components/BannerCarousel.vue'
+import HotCategoryBlock from './components/HotCategoryBlock.vue'
 import CreationGrid from './components/CreationGrid.vue'
+import { getHotInspirationFlowBatchApi } from '@/utils/api.js'
 import { clearSubStepProgress, shouldShowGuideStartModal } from '@/utils/guideConfig.js'
 import { useBanner } from './composables/useBanner.js'
 import { doubleTapLike } from '@/utils/likeHelper.js'
@@ -112,6 +128,8 @@ const showRankingModal = ref(false)
 const isActive = ref(true)
 const isFixed = ref(false)
 const creationGridRef = ref(null)
+const hotCategories = ref([])
+const hotCategoryRefs = ref({})
 const cardTapTimers = {}
 const likingMap = ref({})
 
@@ -176,6 +194,23 @@ const handleCardClick = (card) => {
   }
 }
 
+const loadHotCategories = async () => {
+  try {
+    const res = await getHotInspirationFlowBatchApi()
+    if (res.code === 200 && res.data?.categories) {
+      hotCategories.value = res.data.categories
+    }
+  } catch (e) {
+    console.error('[square] 加载热门分类失败', e)
+  }
+}
+
+const handleHotCardClick = (item) => {
+  uni.navigateTo({
+    url: `/pages/asset-detail/asset-detail?asset_id=${item.asset_id}`
+  })
+}
+
 const handleScrollToLower = () => {
   if (creationGridRef.value) {
     creationGridRef.value.loadMore()
@@ -242,6 +277,7 @@ onMounted(() => {
 
   resetSquare()
   loadBannerActivities()
+  loadHotCategories()
 })
 
 onShow(() => {
@@ -371,6 +407,11 @@ onUnmounted(() => {
   font-weight: 600;
 }
 
+/* 热门分类区块 */
+.hot-category-wrapper {
+  margin-bottom: 16rpx;
+}
+
 /* 蒙层 */
 .nav-mask {
   position: fixed;