hookehuyr

feat(material-list): 添加动态分类支持

- 新增 hasCategories 状态,支持有/无分类两种模式
- 新增 fetchCategoriesFromBackend 函数,模拟后端分类数据
- 优化 initTabsData 函数,自动选中第一个分类(有分类时)
- 动态显示 Tabs(仅在有分类时显示)
- 无分类时直接显示全部资料列表

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
......@@ -18,7 +18,8 @@
<!-- Tabs Container -->
<view class="flex-1 min-h-0 flex flex-col">
<nut-tabs v-model="activeTabId">
<!-- 动态显示 Tabs(仅在有分类时显示) -->
<nut-tabs v-if="hasCategories" v-model="activeTabId">
<!-- 自定义标签栏 -->
<template #titles>
<view class="filter-tabs-wrapper">
......@@ -114,6 +115,12 @@ const listVisible = ref(true)
const listRenderKey = ref(0)
/**
* 是否有分类标签
* @description 随机模拟后端返回数据,50% 概率有分类
*/
const hasCategories = ref(false)
/**
* 页面标题
*/
const pageTitle = ref('资料列表')
......@@ -289,19 +296,45 @@ const allList = ref([
*
* @description 包含分类信息和对应的资料列表
*/
const tabsData = ref([
const tabsData = ref([])
/**
* 模拟后端返回的分类数据
* @description 根据随机结果决定是否返回分类数据
*/
const fetchCategoriesFromBackend = () => {
// 模拟 50% 概率有分类
const hasCat = Math.random() > 0.5
hasCategories.value = hasCat
console.log('[Material List] 模拟后端返回分类数据:', hasCat ? '有分类' : '无分类')
if (hasCat) {
// 有分类:返回分类列表
return [
{ id: '', name: '全部资料', list: [] },
{ id: 'exam', name: '考试资料', list: [] },
{ id: 'product', name: '产品手册', list: [] },
{ id: 'training', name: '培训材料', list: [] },
{ id: 'case', name: '案例分享', list: [] },
])
]
} else {
// 无分类:只返回"全部资料"一个占位分类(用于数据管理)
return [
{ id: '', name: '全部资料', list: [] }
]
}
}
/**
* 初始化数据分布
* @description 根据分类规则将 allList 中的数据分配到各个 tab 中
*/
const initTabsData = () => {
// 1. 先获取后端返回的分类数据
tabsData.value = fetchCategoriesFromBackend()
// 2. 根据分类分配数据
tabsData.value.forEach((tab, index) => {
if (tab.id === '') {
tab.list = [...allList.value]
......@@ -311,6 +344,16 @@ const initTabsData = () => {
tab.list = allList.value.filter((_, i) => (i + index) % (index + 2) === 0)
}
})
// 3. 如果有分类,默认选中第一个 tab
if (hasCategories.value && tabsData.value.length > 0) {
activeTabId.value = tabsData.value[0].id
console.log('[Material List] 自动选中第一个分类:', tabsData.value[0].name)
} else {
// 无分类时,activeTabId 设为空字符串(匹配"全部资料")
activeTabId.value = ''
console.log('[Material List] 无分类模式,显示全部资料')
}
}
/**
......@@ -342,16 +385,22 @@ useLoad((options) => {
pageTitle.value = options.title
}
if (options.categoryId) {
activeTabId.value = options.categoryId
console.log('[Material List] 初始分类:', activeTabId.value)
// 初始化数据(会自动设置 activeTabId)
initTabsData()
// 如果有特定的加载逻辑,可以在这里调用
// loadMaterialsByCategory(activeTabId.value)
// 如果后端有返回特定的分类 ID,可以覆盖默认选择
if (options.categoryId && hasCategories.value) {
// 检查该 categoryId 是否存在于 tabsData 中
const tabExists = tabsData.value.some(tab => tab.id === options.categoryId)
if (tabExists) {
activeTabId.value = options.categoryId
console.log('[Material List] 使用页面参数的分类:', activeTabId.value)
} else {
console.warn('[Material List] 页面指定的分类不存在,使用默认分类')
}
}
// 初始化数据
initTabsData()
console.log('[Material List] 最终状态 - 有分类:', hasCategories.value, '当前选中:', activeTabId.value)
})
/**
......