mirror of
https://github.com/ialley-workshop-open/uni-halo.git
synced 2026-07-27 04:20:43 +08:00
小莫唐尼
7d74a40f51
1. 修改项目概览文档标题 2. 将详情按钮文字大小从11px改为text-xs 3. 移除分类标签右侧的多余内边距 4. 关闭首页列表加载loading弹窗 5. 调整友链项的间距与头像尺寸
77 lines
3.0 KiB
Vue
77 lines
3.0 KiB
Vue
<script setup lang="ts">
|
|
import { cover } from '@/utils/imageHelper'
|
|
import { queryCategories } from '@/api/halo-base/category'
|
|
import type { CategoryV1alpha1PublicApiQueryCategoriesRequest, CategoryVoList } from '@halo-dev/api-client'
|
|
|
|
const { loading, error, data, run } = useRequest<CategoryVoList, CategoryV1alpha1PublicApiQueryCategoriesRequest>(queryCategories, { loadingToast: false, loadingToastContent: '加载中...', loadingToastMask: true })
|
|
|
|
const isVisible = computed(() => {
|
|
return !loading.value && !error.value && data.value?.items.length > 0
|
|
})
|
|
|
|
const firstCateItem = computed(() => {
|
|
const item = data.value?.items[0]
|
|
return {
|
|
name: item.spec.displayName,
|
|
count: item.status.postCount,
|
|
cover: cover(item.spec.cover),
|
|
}
|
|
})
|
|
|
|
const otherCateItems = computed(() => {
|
|
const items = data.value?.items.slice(1) || []
|
|
return items.map(item => ({
|
|
name: item.spec.displayName,
|
|
count: item.status.postCount,
|
|
cover: cover(item.spec.cover),
|
|
}))
|
|
})
|
|
|
|
onMounted(() => {
|
|
console.log('分类推荐 onMounted')
|
|
run({
|
|
page: 1,
|
|
size: 3,
|
|
})
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<view v-if="isVisible" class="mt-6 box-border px-4">
|
|
<view class="mb-4 box-border flex items-center justify-between">
|
|
<text class="text-sm text-gray-900 font-bold">热门分类</text>
|
|
</view>
|
|
<view class="box-border h-36 flex items-center gap-2 overflow-hidden">
|
|
<view
|
|
class="relative box-border h-full flex-1 overflow-hidden border-2 border-white rounded-xl border-solid bg-white"
|
|
>
|
|
<image :src="firstCateItem.cover" mode="heightFix" class="h-full w-full rounded-xl" />
|
|
<view
|
|
class="absolute bottom-0 left-0 right-0 z-10 box-border box-border w-full flex flex-col gap-y-1 from-black/0 via-black/50 to-black/90 bg-gradient-to-b p-2"
|
|
>
|
|
<text class="line-clamp-1 text-xs text-white font-bold">{{ firstCateItem.name }}</text>
|
|
</view>
|
|
<view class="absolute right-2 top-2 z-10 box-border rounded-md bg-black/20 px-1.5">
|
|
<text class="text-[12px] text-white">{{ firstCateItem.count }}</text>
|
|
</view>
|
|
</view>
|
|
<view class="h-full flex flex-1 flex-col gap-2">
|
|
<view
|
|
v-for="cate in otherCateItems" :key="cate.name"
|
|
class="relative box-border flex-1 overflow-hidden border-2 border-white rounded-xl border-solid bg-white"
|
|
>
|
|
<image :src="cate.cover" mode="aspectFill" class="w-full rounded-xl" />
|
|
<view
|
|
class="absolute bottom-0 left-0 right-0 z-10 box-border box-border w-full flex flex-col gap-y-1 from-black/0 via-black/50 to-black/90 bg-gradient-to-b p-2"
|
|
>
|
|
<text class="line-clamp-1 text-xs text-white font-bold">{{ cate.name }}</text>
|
|
</view>
|
|
<view class="absolute right-2 top-2 z-10 box-border rounded-md bg-black/20 px-1.5 py-0.5">
|
|
<text class="text-[12px] text-white">{{ cate.count }}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|