mirror of
https://github.com/ialley-workshop-open/uni-halo.git
synced 2026-09-12 16:40:40 +08:00
小莫唐尼
02fa9e4294
1. 重构分类页面路由与实现，替换旧分类详情页为文章列表页 2. 统一使用自定义导航栏，替换原有原生导航配置 3. 重构加载状态管理，统一使用useDataLoadingStatus hook 4. 优化插件可用性检查逻辑与组件展示 5. 调整数据加载占位与空状态样式 6. 优化文章卡片样式与交互，新增分类跳转功能 7. 重构设置页枚举选择弹窗，使用wd-picker替换自定义实现 8. 删除废弃的IPluginAvailable类型与相关代码
102 lines
3.2 KiB
Vue
102 lines
3.2 KiB
Vue
<script lang="ts" setup>
|
|
import { computed } from 'vue'
|
|
import { getCategoryList } from '@/api/halo'
|
|
import { checkThumbnailUrl } from '@/utils/url'
|
|
import { useAppConfigStore } from '@/store/appConfig'
|
|
import type { ICategory } from '@/api/types/halo'
|
|
|
|
const appConfigStore = useAppConfigStore()
|
|
|
|
const haloConfigs = computed(() => appConfigStore.configs)
|
|
|
|
const calcAuditModeEnabled = computed(() => appConfigStore.auditModeEnabled)
|
|
|
|
const loading = ref<'loading' | 'success' | 'error'>('loading')
|
|
const categoryList = ref<ICategory[]>([])
|
|
|
|
const calcIsShowCategory = computed(() => {
|
|
if (calcAuditModeEnabled.value) {
|
|
return false;
|
|
}
|
|
return !!haloConfigs.value.pageConfig?.homeConfig?.useCategory
|
|
})
|
|
|
|
/** 精选分类 */
|
|
async function handleGetCategoryList() {
|
|
if (calcAuditModeEnabled.value || !calcIsShowCategory.value) {
|
|
loading.value = 'success'
|
|
return
|
|
}
|
|
try {
|
|
loading.value = 'loading'
|
|
const res = await getCategoryList({ fieldSelector: ['spec.hideFromList=false'], size: 3 })
|
|
categoryList.value = res.data.items
|
|
.map(item => {
|
|
item.spec.cover = checkThumbnailUrl(item.spec.cover)
|
|
return {
|
|
...item,
|
|
postCount: item.postCount ?? 0
|
|
}
|
|
})
|
|
.sort((a, b) => (b.postCount || 0) - (a.postCount || 0))
|
|
loading.value = 'success'
|
|
}
|
|
catch (err) {
|
|
console.error('获取分类失败', err)
|
|
loading.value = 'error'
|
|
}
|
|
}
|
|
|
|
|
|
function handleToCategoryPage() {
|
|
uni.switchTab({ url: '/pages/tabbar/category/category' })
|
|
}
|
|
|
|
|
|
function handleToCategoryBy(category : ICategory) {
|
|
if (calcAuditModeEnabled.value)
|
|
return
|
|
uni.navigateTo({
|
|
url: `/pages-blog/category-articles/category-articles?name=${category.metadata.name}&title=${category.spec.displayName}`,
|
|
})
|
|
}
|
|
|
|
onMounted(() => {
|
|
handleGetCategoryList()
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<view v-if="calcIsShowCategory" class="mb-6">
|
|
<uh-section-title class="mb-4 px-3 box-border">
|
|
精选分类
|
|
<template #right>
|
|
<view class="flex items-center justify-center rounded-md bg-white p-1.5 text-gray-400" @click="handleToCategoryPage">
|
|
<wd-icon name="arrow-right" size="12px" />
|
|
</view>
|
|
</template>
|
|
</uh-section-title>
|
|
|
|
<view class="w-full grid grid-cols-2 grid-rows-auto h-42 box-border px-3 gap-2">
|
|
<view v-if="categoryList.length === 0"
|
|
class="cate-empty text-grey w-full flex items-center justify-center">
|
|
还没有任何分类~
|
|
</view>
|
|
<block v-else>
|
|
<view v-for="(category,index) in categoryList" :key="category.metadata.name"
|
|
class="uh-global-card-glass relative w-full h-full overflow-hidden rounded-xl text-center text-white"
|
|
:class="{'grid-row-span-2':index===0 }" @click="handleToCategoryBy(category)">
|
|
<image :src="category.spec.cover" class="w-full h-full" mode="aspectFill" lazy-load />
|
|
<view
|
|
class="absolute bottom-0 left-0 h-[140rpx] w-full bg-gradient-to-b from-black/0 to-black/30" />
|
|
<view class="absolute left-2 bottom-2 flex z-2 flex-col text-left">
|
|
<text class="text-sm font-bold">
|
|
{{ category.spec.displayName }}
|
|
</text>
|
|
<text class="mt-1 text-xs text-gray-200">共 {{ category.postCount ?? 0 }} 篇</text>
|
|
</view>
|
|
</view>
|
|
</block>
|
|
</view>
|
|
</view>
|
|
</template> |