diff --git a/docs/superpowers/plans/2026-05-28-热门推荐模块前端实现计划.md b/docs/superpowers/plans/2026-05-28-热门推荐模块前端实现计划.md
new file mode 100644
index 0000000..6cfe272
--- /dev/null
+++ b/docs/superpowers/plans/2026-05-28-热门推荐模块前端实现计划.md
@@ -0,0 +1,802 @@
+# 热门推荐模块前端实现计划
+
+> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.
+
+**Goal:** 在广场页面集成4个热门分类区块，每个区块显示8张高点赞作品，支持刷新和查看更多
+
+**Architecture:** 使用 Vue 3 Composition API + uni-app，通过 API 批量获取4个分类数据，单独分类刷新，查看更多跳转新页面
+
+**Tech Stack:** uni-app + Vue 3 + SCSS
+
+---
+
+## 文件结构
+
+```
+frontend/pages/square/
+├── square.vue # 修改：集成4个HotCategoryBlock
+├── components/
+│ └── HotCategoryBlock.vue # 新增：单个热门分类区块组件
+└── hot-category-more.vue # 新增：热门分类查看更多页面
+
+frontend/utils/
+└── api.js # 修改：新增3个API方法
+```
+
+---
+
+## API 变更
+
+**新增 3 个 API**（在 `api.js` 末尾添加）:
+
+1. `getHotInspirationFlowBatchApi()` — 批量获取4个分类
+2. `getHotInspirationFlowApi(type)` — 单个分类刷新
+3. `getHotInspirationFlowMoreApi(type, cursor, limit)` — 查看更多分页
+
+---
+
+## 实现步骤
+
+### Task 1: 添加 API 方法
+
+**文件:**
+- 修改: `frontend/utils/api.js`
+
+- [ ] **Step 1: 在 api.js 末尾添加3个API方法**
+
+```javascript
+// ==================== 热门推荐相关接口 ====================
+
+// 批量获取热门分类（页面初始化）
+export function getHotInspirationFlowBatchApi() {
+ return request({
+ url: '/api/v1/inspiration-flow/hot/batch',
+ method: 'GET'
+ })
+}
+
+// 单个分类刷新
+export function getHotInspirationFlowApi(type) {
+ return request({
+ url: '/api/v1/inspiration-flow/hot',
+ method: 'GET',
+ data: { type }
+ })
+}
+
+// 查看更多分页
+export function getHotInspirationFlowMoreApi(type, cursor = '', limit = 20) {
+ return request({
+ url: '/api/v1/inspiration-flow/hot/more',
+ method: 'GET',
+ data: { type, cursor, limit }
+ })
+}
+```
+
+- [ ] **Step 2: 提交**
+
+```bash
+git add frontend/utils/api.js
+git commit -m "feat: 新增热门推荐API方法"
+```
+
+---
+
+### Task 2: 创建 HotCategoryBlock.vue 组件
+
+**文件:**
+- 创建: `frontend/pages/square/components/HotCategoryBlock.vue`
+
+- [ ] **Step 1: 创建组件文件**
+
+```vue
+
+
+
+ {{ title }}
+
+
+
+
+
+
+
+
+
+ 暂无{{ title }}作品
+
+
+
+
+
+
+
+
+ {{ item.owner_nickname }}
+
+
+
+ {{ formatCount(item.likes) }}
+
+
+
+
+
+
+
+
+ ↻
+
+
+ 查看更多
+ ›
+
+
+
+
+
+
+
+
+```
+
+- [ ] **Step 2: 提交**
+
+```bash
+git add frontend/pages/square/components/HotCategoryBlock.vue
+git commit -m "feat: 新增HotCategoryBlock组件"
+```
+
+---
+
+### Task 3: 创建 hot-category-more.vue 页面
+
+**文件:**
+- 创建: `frontend/pages/square/hot-category-more.vue`
+- 创建: `frontend/pages/square/hot-category-more.vue` 的 json 配置
+
+**pages.json 添加:**
+```json
+{
+ "path": "pages/square/hot-category-more",
+ "style": {
+ "navigationBarTitleText": "热门推荐",
+ "navigationBarBackgroundColor": "#1a1a2e",
+ "navigationBarTextStyle": "white",
+ "backgroundColor": "#1a1a2e"
+ }
+}
+```
+
+- [ ] **Step 1: 创建 hot-category-more.vue 页面**
+
+```vue
+
+
+
+
+
+
+
+ {{ tab.label }}
+
+
+
+
+
+
+
+
+
+
+
+
+ {{ item.owner_nickname }}
+
+
+
+ {{ formatCount(item.likes) }}
+
+
+
+
+
+
+
+ 加载中...
+
+
+ 没有更多了
+
+
+
+
+
+
+
+```
+
+- [ ] **Step 2: 提交**
+
+```bash
+git add frontend/pages/square/hot-category-more.vue
+git commit -m "feat: 新增热门分类查看更多页面"
+```
+
+---
+
+### Task 4: 修改 square.vue 集成 HotCategoryBlock
+
+**文件:**
+- 修改: `frontend/pages/square/square.vue`
+
+- [ ] **Step 1: 在 script setup 中添加引入和状态**
+
+```javascript
+import HotCategoryBlock from './components/HotCategoryBlock.vue'
+import { getHotInspirationFlowBatchApi } from '@/utils/api.js'
+
+// 热门分类状态
+const hotCategories = ref([])
+const hotCategoryRefs = ref({})
+
+// 批量加载热门分类
+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 handleHotCategoryRefresh = async (categoryType) => {
+ const ref = hotCategoryRefs.value[categoryType]
+ if (ref) {
+ await ref.handleRefresh()
+ }
+}
+
+// 点击热门卡片
+const handleHotCardClick = (item) => {
+ uni.navigateTo({
+ url: `/pages/asset-detail/asset-detail?asset_id=${item.asset_id}`
+ })
+}
+```
+
+- [ ] **Step 2: 在 onMounted 中调用 loadHotCategories**
+
+```javascript
+onMounted(() => {
+ const info = uni.getSystemInfoSync()
+ screenWidth.value = info.windowWidth
+ screenHeight.value = info.windowHeight
+
+ resetSquare()
+ loadBannerActivities()
+ loadHotCategories() // 新增
+})
+```
+
+- [ ] **Step 3: 在模板的 CreationGrid 之前添加4个 HotCategoryBlock**
+
+```html
+
+
+
+
+```
+
+- [ ] **Step 4: 添加样式**
+
+```css
+/* 热门分类区块 */
+.hot-category-wrapper {
+ margin-bottom: 16rpx;
+}
+```
+
+- [ ] **Step 5: 提交**
+
+```bash
+git add frontend/pages/square/square.vue
+git commit -m "feat: 集成4个热门分类区块到广场页面"
+```
+
+---
+
+### Task 5: 添加 pages.json 路由配置
+
+**文件:**
+- 修改: `frontend/pages.json`
+
+- [ ] **Step 1: 在 pages.json 添加 hot-category-more 页面配置**
+
+```json
+{
+ "path": "pages/square/hot-category-more",
+ "style": {
+ "navigationBarTitleText": "热门推荐",
+ "navigationBarBackgroundColor": "#1a1a2e",
+ "navigationBarTextStyle": "white",
+ "backgroundColor": "#1a1a2e"
+ }
+}
+```
+
+- [ ] **Step 2: 提交**
+
+```bash
+git add frontend/pages.json
+git commit -m "feat: 添加热门分类查看更多页面路由"
+```
+
+---
+
+## 验证清单
+
+- [ ] API 方法添加成功
+- [ ] HotCategoryBlock 组件渲染正常
+- [ ] 4个分类区块正确显示
+- [ ] 刷新按钮旋转动画正常
+- [ ] 查看更多跳转正常
+- [ ] hot-category-more 页面子标签正常（星卡分类）
+- [ ] 分页加载正常
+- [ ] 空状态显示正常
\ No newline at end of file